@charset "UTF-8"; .loading { background: center center no-repeat; background-size: cover; background-image: url(data:image/png;base64,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); } /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ .loading { -webkit-animation: none 333ms linear infinite; -khtml-animation: none 333ms linear infinite; -moz-animation: none 333ms linear infinite; -ms-animation: none 333ms linear infinite; -o-animation: none 333ms linear infinite; animation: none 333ms linear infinite; } .loading { -webkit-animation-name: spin; -khtml-animation-name: spin; -moz-animation-name: spin; -ms-animation-name: spin; -o-animation-name: spin; animation-name: spin; -webkit-animation-duration: 1000ms; -khtml-animation-duration: 1000ms; -moz-animation-duration: 1000ms; -ms-animation-duration: 1000ms; -o-animation-duration: 1000ms; animation-duration: 1000ms; -webkit-animation-timing-function: linear; -khtml-animation-timing-function: linear; -moz-animation-timing-function: linear; -ms-animation-timing-function: linear; -o-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -khtml-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-iteration-count: infinite; } /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ .icon-add-to-group:before, .icon-add:before, .icon-album:before, .icon-all:before, .icon-amazon-prints:before, .icon-appswitcher:before, .icon-back:before, .icon-bill:before, .icon-broken:before, .icon-camera-body:before, .icon-camera:before, .icon-change-tag:before, .icon-checkmark:before, .icon-chevron_down:before, .icon-chevron_left:before, .icon-chevron_right:before, .icon-chevron_up:before, .icon-circle-checkmark:before, .icon-clock:before, .icon-delete-thin:before, .icon-delete:before, .icon-desktop:before, .icon-dislike:before, .icon-down:before, .icon-downarrow:before, .icon-download:before, .icon-edit-pen:before, .icon-edit-tags:before, .icon-edit:before, .icon-email:before, .icon-error:before, .icon-facebook:before, .icon-faces:before, .icon-family:before, .icon-family_plus:before, .icon-file-excel:before, .icon-file-exe:before, .icon-file-folder:before, .icon-file-generic:before, .icon-file-html:before, .icon-file-music:before, .icon-file-pdf:before, .icon-file-powerpoint:before, .icon-file-txt:before, .icon-file-word:before, .icon-file-zip:before, .icon-file:before, .icon-files:before, .icon-flag:before, .icon-folder:before, .icon-get-apps-icon:before, .icon-go-link:before, .icon-groups:before, .icon-help:before, .icon-hide:before, .icon-home:before, .icon-individual:before, .icon-info:before, .icon-left:before, .icon-like:before, .icon-link:before, .icon-location:before, .icon-locked-folder:before, .icon-merge:before, .icon-mobile:before, .icon-more:before, .icon-move:before, .icon-new-folder:before, .icon-overflow:before, .icon-person:before, .icon-photo-card:before, .icon-photo:before, .icon-photos-mono:before, .icon-photos-videos:before, .icon-prints:before, .icon-recent:before, .icon-remove-from-group:before, .icon-remove-tag:before, .icon-rename:before, .icon-restore:before, .icon-right:before, .icon-search:before, .icon-select:before, .icon-send_feedback:before, .icon-settings:before, .icon-share-v2:before, .icon-share:before, .icon-signout:before, .icon-storage:before, .icon-sync:before, .icon-thisday:before, .icon-twitter:before, .icon-unhide:before, .icon-unlimited:before, .icon-unshare:before, .icon-up-arrow-circle:before, .icon-up:before, .icon-update-album:before, .icon-upload-folder:before, .icon-upload:before, .icon-uploading:before, .icon-video-enter-fullscreen:before, .icon-video-exit-fullscreen:before, .icon-video-high-volume:before, .icon-video-mute:before, .icon-video-pause:before, .icon-video-play:before, .icon-video-square:before, .icon-video:before, .icon-wall-art:before, .icon-warning:before, .icon-x:before { font-family: "fontIcons"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; text-transform: none; } /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ @font-face { font-family: "fontIcons"; src: url(data:application/vnd.ms-fontobject;base64,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AAsAAOAMAADgDAAAAAwAAOANAADgDQAAAA0AAOAOAADgDgAAAA4AAOAPAADgDwAAAA8AAOAQAADgEAAAABAAAOARAADgEQAAABEAAOASAADgEgAAABIAAOATAADgEwAAABMAAOAUAADgFAAAABQAAOAVAADgFQAAABUAAOAWAADgFgAAABYAAOAXAADgFwAAABcAAOAYAADgGAAAABgAAOAZAADgGQAAABkAAOAaAADgGgAAABoAAOAbAADgGwAAABsAAOAcAADgHAAAABwAAOAdAADgHQAAAB0AAOAeAADgHgAAAB4AAOAfAADgHwAAAB8AAOAgAADgIAAAACAAAOAhAADgIQAAACEAAOAiAADgIgAAACIAAOAjAADgIwAAACMAAOAkAADgJAAAACQAAOAlAADgJQAAACUAAOAmAADgJgAAACYAAOAnAADgJwAAACcAAOAoAADgKAAAACgAAOApAADgKQAAACkAAOAqAADgKgAAACoAAOArAADgKwAAACsAAOAsAADgLAAAACwAAOAtAADgLQAAAC0AAOAuAADgLgAAAC4AAOAvAADgLwAAAC8AAOAwAADgMAAAADAAAOAxAADgMQAAADEAAOAyAADgMgAAADIAAOAzAADgMwAAADMAAOA0AADgNAAAADQAAOA1AADgNQAAADUAAOA2AADgNgAAADYAAOA3AADgNwAAADcAAOA4AADgOAAAADgAAOA5AADgOQAAADkAAOA6AADgOgAAADoAAOA7AADgOwAAADsAAOA8AADgPAAAADwAAOA9AADgPQAAAD0AAOA+AADgPgAAAD4AAOA/AADgPwAAAD8AAOBAAADgQAAAAEAAAOBBAADgQQAAAEEAAOBCAADgQgAAAEIAAOBDAADgQwAAAEMAAOBEAADgRAAAAEQAAOBFAADgRQAAAEUAAOBGAADgRgAAAEYAAOBHAADgRwAAAEcAAOBIAADgSAAAAEgAAOBJAADgSQAAAEkAAOBKAADgSgAAAEoAAOBLAADgSwAAAEsAAOBMAADgTAAAAEwAAOBNAADgTQAAAE0AAOBOAADgTgAAAE4AAOBPAADgTwAAAE8AAOBQAADgUAAAAFAAAOBRAADgUQAAAFEAAOBSAADgUgAAAFIAAOBTAADgUwAAAFMAAOBUAADgVAAAAFQAAOBVAADgVQAAAFUAAOBWAADgVgAA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cmEKY2hhbmdlLXRhZwljaGVja21hcmsMY2hldnJvbl9kb3duDGNoZXZyb25fbGVmdA1jaGV2cm9uX3JpZ2h0CmNoZXZyb25fdXAQY2lyY2xlLWNoZWNrbWFyawVjbG9jawtkZWxldGUtdGhpbgZkZWxldGUHZGVza3RvcAdkaXNsaWtlBGRvd24JZG93bmFycm93CGRvd25sb2FkCGVkaXQtcGVuCWVkaXQtdGFncwRlZGl0BWVtYWlsBWVycm9yCGZhY2Vib29rBWZhY2VzBmZhbWlseQtmYW1pbHlfcGx1cwpmaWxlLWV4Y2VsCGZpbGUtZXhlC2ZpbGUtZm9sZGVyDGZpbGUtZ2VuZXJpYwlmaWxlLWh0bWwKZmlsZS1tdXNpYwhmaWxlLXBkZg9maWxlLXBvd2VycG9pbnQIZmlsZS10eHQJZmlsZS13b3JkCGZpbGUtemlwBGZpbGUFZmlsZXMEZmxhZwZmb2xkZXINZ2V0LWFwcHMtaWNvbgdnby1saW5rBmdyb3VwcwRoZWxwBGhpZGUEaG9tZQppbmRpdmlkdWFsBGluZm8EbGVmdARsaWtlBGxpbmsIbG9jYXRpb24NbG9ja2VkLWZvbGRlcgVtZXJnZQZtb2JpbGUEbW9yZQRtb3ZlCm5ldy1mb2xkZXIIb3ZlcmZsb3cGcGVyc29uCnBob3RvLWNhcmQFcGhvdG8LcGhvdG9zLW1vbm8NcGhvdG9zLXZpZGVvcwZwcmludHMGcmVjZW50EXJlbW92ZS1mcm9tLWdyb3VwCnJlbW92ZS10YWcGcmVuYW1lB3Jlc3RvcmUFcmlnaHQGc2VhcmNoBnNlbGVjdA1zZW5kX2ZlZWRiYWNrCHNldHRpbmdzCHNoYXJlLXYyBXNoYXJlB3NpZ25vdXQHc3RvcmFnZQRzeW5jB3RoaXNkYXkHdHdpdHRlcgZ1bmhpZGUJdW5saW1pdGVkB3Vuc2hhcmUPdXAtYXJyb3ctY2lyY2xlAnVwDHVwZGF0ZS1hbGJ1bQ11cGxvYWQtZm9sZGVyBnVwbG9hZAl1cGxvYWRpbmcWdmlkZW8tZW50ZXItZnVsbHNjcmVlbhV2aWRlby1leGl0LWZ1bGxzY3JlZW4RdmlkZW8taGlnaC12b2x1bWUKdmlkZW8tbXV0ZQt2aWRlby1wYXVzZQp2aWRlby1wbGF5DHZpZGVvLXNxdWFyZQV2aWRlbwh3YWxsLWFydAd3YXJuaW5nAXgAAAAAAA==) format("embedded-opentype"); src: url(data:application/font-woff;base64,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) format("woff"); } .icon-add-to-group:before { content: "\E001"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-add:before { content: "\E002"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-album:before { content: "\E003"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-all:before { content: "\E004"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-amazon-prints:before { content: "\E005"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-appswitcher:before { content: "\E006"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-back:before { content: "\E007"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-bill:before { content: "\E008"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-broken:before { content: "\E009"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-camera-body:before { content: "\E00A"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-camera:before { content: "\E00B"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-change-tag:before { content: "\E00C"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-checkmark:before { content: "\E00D"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-chevron_down:before { content: "\E00E"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-chevron_left:before { content: "\E00F"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-chevron_right:before { content: "\E010"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-chevron_up:before { content: "\E011"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-circle-checkmark:before { content: "\E012"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-clock:before { content: "\E013"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-delete-thin:before { content: "\E014"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-delete:before { content: "\E015"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-desktop:before { content: "\E016"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-dislike:before { content: "\E017"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-down:before { content: "\E018"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-downarrow:before { content: "\E019"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-download:before { content: "\E01A"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-edit-pen:before { content: "\E01B"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-edit-tags:before { content: "\E01C"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-edit:before { content: "\E01D"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-email:before { content: "\E01E"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-error:before { content: "\E01F"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-facebook:before { content: "\E020"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-faces:before { content: "\E021"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-family:before { content: "\E022"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-family_plus:before { content: "\E023"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-file-excel:before { content: "\E024"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-file-exe:before { content: "\E025"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-file-folder:before { content: "\E026"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-file-generic:before { content: "\E027"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-file-html:before { content: "\E028"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-file-music:before { content: "\E029"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-file-pdf:before { content: "\E02A"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-file-powerpoint:before { content: "\E02B"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-file-txt:before { content: "\E02C"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-file-word:before { content: "\E02D"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-file-zip:before { content: "\E02E"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-file:before { content: "\E02F"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-files:before { content: "\E030"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-flag:before { content: "\E031"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-folder:before { content: "\E032"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-get-apps-icon:before { content: "\E033"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-go-link:before { content: "\E034"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-groups:before { content: "\E035"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-help:before { content: "\E036"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-hide:before { content: "\E037"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-home:before { content: "\E038"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-individual:before { content: "\E039"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-info:before { content: "\E03A"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-left:before { content: "\E03B"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-like:before { content: "\E03C"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-link:before { content: "\E03D"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-location:before { content: "\E03E"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-locked-folder:before { content: "\E03F"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-merge:before { content: "\E040"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-mobile:before { content: "\E041"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-more:before { content: "\E042"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-move:before { content: "\E043"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-new-folder:before { content: "\E044"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-overflow:before { content: "\E045"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-person:before { content: "\E046"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-photo-card:before { content: "\E047"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-photo:before { content: "\E048"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-photos-mono:before { content: "\E049"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-photos-videos:before { content: "\E04A"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-prints:before { content: "\E04B"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-recent:before { content: "\E04C"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-remove-from-group:before { content: "\E04D"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-remove-tag:before { content: "\E04E"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-rename:before { content: "\E04F"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-restore:before { content: "\E050"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-right:before { content: "\E051"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-search:before { content: "\E052"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-select:before { content: "\E053"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-send_feedback:before { content: "\E054"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-settings:before { content: "\E055"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-share-v2:before { content: "\E056"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-share:before { content: "\E057"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-signout:before { content: "\E058"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-storage:before { content: "\E059"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-sync:before { content: "\E05A"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-thisday:before { content: "\E05B"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-twitter:before { content: "\E05C"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-unhide:before { content: "\E05D"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-unlimited:before { content: "\E05E"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-unshare:before { content: "\E05F"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-up-arrow-circle:before { content: "\E060"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-up:before { content: "\E061"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-update-album:before { content: "\E062"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-upload-folder:before { content: "\E063"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-upload:before { content: "\E064"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-uploading:before { content: "\E065"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-video-enter-fullscreen:before { content: "\E066"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-video-exit-fullscreen:before { content: "\E067"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-video-high-volume:before { content: "\E068"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-video-mute:before { content: "\E069"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-video-pause:before { content: "\E06A"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-video-play:before { content: "\E06B"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-video-square:before { content: "\E06C"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-video:before { content: "\E06D"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-wall-art:before { content: "\E06E"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-warning:before { content: "\E06F"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-x:before { content: "\E070"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .text-link { cursor: pointer; color: #3d7eda; } .text-link:enabled:hover, .text-link:enabled:focus, .text-link:enabled:active, .text-link:enabled.active, .enabled.text-link:hover, .enabled.text-link:focus, .enabled.text-link:active, .enabled.active.text-link { text-decoration: underline; } .text-link:disabled, .disabled.text-link { cursor: default; color: #3a89f6; } .text-link:disabled:hover, .text-link:disabled:focus, .text-link:disabled:active, .text-link:disabled.active, .disabled.text-link:hover, .disabled.text-link:focus, .disabled.text-link:active, .disabled.active.text-link { text-decoration: none; } @font-face { font-family: 'AmazonEmber'; src: url(data:application/vnd.ms-fontobject;base64,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) format("embedded-opentype"), url(data:application/font-woff;base64,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) format("woff"); font-style: normal; font-weight: normal; } @font-face { font-family: 'AmazonEmber'; src: url(data:application/vnd.ms-fontobject;base64,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) format("embedded-opentype"), url(data:application/font-woff;base64,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) format("woff"); font-style: normal; font-weight: 100; } /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ @-webkit-keyframes spin { from { -webkit-transform: rotate(0deg); -khtml-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); -khtml-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @-moz-keyframes spin { from { -webkit-transform: rotate(0deg); -khtml-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); -khtml-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @-ms-keyframes spin { from { -webkit-transform: rotate(0deg); -khtml-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); -khtml-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @-o-keyframes spin { from { -webkit-transform: rotate(0deg); -khtml-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); -khtml-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spin { from { -webkit-transform: rotate(0deg); -khtml-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); -khtml-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes pop-out-fade-in { from { filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-opacity: 0; -khtml-opacity: 0; -moz-opacity: 0; -ms-opacity: 0; -o-opacity: 0; opacity: 0; } to { filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; -webkit-opacity: 1; -khtml-opacity: 1; -moz-opacity: 1; -ms-opacity: 1; -o-opacity: 1; opacity: 1; } } @-moz-keyframes pop-out-fade-in { from { filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-opacity: 0; -khtml-opacity: 0; -moz-opacity: 0; -ms-opacity: 0; -o-opacity: 0; opacity: 0; } to { filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; -webkit-opacity: 1; -khtml-opacity: 1; -moz-opacity: 1; -ms-opacity: 1; -o-opacity: 1; opacity: 1; } } @-ms-keyframes pop-out-fade-in { from { filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-opacity: 0; -khtml-opacity: 0; -moz-opacity: 0; -ms-opacity: 0; -o-opacity: 0; opacity: 0; } to { filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; -webkit-opacity: 1; -khtml-opacity: 1; -moz-opacity: 1; -ms-opacity: 1; -o-opacity: 1; opacity: 1; } } @-o-keyframes pop-out-fade-in { from { filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-opacity: 0; -khtml-opacity: 0; -moz-opacity: 0; -ms-opacity: 0; -o-opacity: 0; opacity: 0; } to { filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; -webkit-opacity: 1; -khtml-opacity: 1; -moz-opacity: 1; -ms-opacity: 1; -o-opacity: 1; opacity: 1; } } @keyframes pop-out-fade-in { from { filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-opacity: 0; -khtml-opacity: 0; -moz-opacity: 0; -ms-opacity: 0; -o-opacity: 0; opacity: 0; } to { filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; -webkit-opacity: 1; -khtml-opacity: 1; -moz-opacity: 1; -ms-opacity: 1; -o-opacity: 1; opacity: 1; } } @-webkit-keyframes bounce { 0% { -webkit-transform: scale(1); -khtml-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 80% { -webkit-transform: scale(1.25); -khtml-transform: scale(1.25); -moz-transform: scale(1.25); -ms-transform: scale(1.25); -o-transform: scale(1.25); transform: scale(1.25); } 100% { -webkit-transform: scale(1.2); -khtml-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); } } @-moz-keyframes bounce { 0% { -webkit-transform: scale(1); -khtml-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 80% { -webkit-transform: scale(1.25); -khtml-transform: scale(1.25); -moz-transform: scale(1.25); -ms-transform: scale(1.25); -o-transform: scale(1.25); transform: scale(1.25); } 100% { -webkit-transform: scale(1.2); -khtml-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); } } @-ms-keyframes bounce { 0% { -webkit-transform: scale(1); -khtml-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 80% { -webkit-transform: scale(1.25); -khtml-transform: scale(1.25); -moz-transform: scale(1.25); -ms-transform: scale(1.25); -o-transform: scale(1.25); transform: scale(1.25); } 100% { -webkit-transform: scale(1.2); -khtml-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); } } @-o-keyframes bounce { 0% { -webkit-transform: scale(1); -khtml-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 80% { -webkit-transform: scale(1.25); -khtml-transform: scale(1.25); -moz-transform: scale(1.25); -ms-transform: scale(1.25); -o-transform: scale(1.25); transform: scale(1.25); } 100% { -webkit-transform: scale(1.2); -khtml-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); } } @keyframes bounce { 0% { -webkit-transform: scale(1); -khtml-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 80% { -webkit-transform: scale(1.25); -khtml-transform: scale(1.25); -moz-transform: scale(1.25); -ms-transform: scale(1.25); -o-transform: scale(1.25); transform: scale(1.25); } 100% { -webkit-transform: scale(1.2); -khtml-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); } } @-webkit-keyframes bounce-sm { 0% { -webkit-transform: scale(0.6); -khtml-transform: scale(0.6); -moz-transform: scale(0.6); -ms-transform: scale(0.6); -o-transform: scale(0.6); transform: scale(0.6); } 80% { -webkit-transform: scale(1.1); -khtml-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } 100% { -webkit-transform: scale(1); -khtml-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } } @-moz-keyframes bounce-sm { 0% { -webkit-transform: scale(0.6); -khtml-transform: scale(0.6); -moz-transform: scale(0.6); -ms-transform: scale(0.6); -o-transform: scale(0.6); transform: scale(0.6); } 80% { -webkit-transform: scale(1.1); -khtml-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } 100% { -webkit-transform: scale(1); -khtml-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } } @-ms-keyframes bounce-sm { 0% { -webkit-transform: scale(0.6); -khtml-transform: scale(0.6); -moz-transform: scale(0.6); -ms-transform: scale(0.6); -o-transform: scale(0.6); transform: scale(0.6); } 80% { -webkit-transform: scale(1.1); -khtml-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } 100% { -webkit-transform: scale(1); -khtml-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } } @-o-keyframes bounce-sm { 0% { -webkit-transform: scale(0.6); -khtml-transform: scale(0.6); -moz-transform: scale(0.6); -ms-transform: scale(0.6); -o-transform: scale(0.6); transform: scale(0.6); } 80% { -webkit-transform: scale(1.1); -khtml-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } 100% { -webkit-transform: scale(1); -khtml-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } } @keyframes bounce-sm { 0% { -webkit-transform: scale(0.6); -khtml-transform: scale(0.6); -moz-transform: scale(0.6); -ms-transform: scale(0.6); -o-transform: scale(0.6); transform: scale(0.6); } 80% { -webkit-transform: scale(1.1); -khtml-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } 100% { -webkit-transform: scale(1); -khtml-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } } @-webkit-keyframes bounce-and-spin { 0% { -webkit-transform: scale(0.6) rotate(90deg); -khtml-transform: scale(0.6) rotate(90deg); -moz-transform: scale(0.6) rotate(90deg); -ms-transform: scale(0.6) rotate(90deg); -o-transform: scale(0.6) rotate(90deg); transform: scale(0.6) rotate(90deg); } 80% { -webkit-transform: scale(1.1) rotate(-10deg); -khtml-transform: scale(1.1) rotate(-10deg); -moz-transform: scale(1.1) rotate(-10deg); -ms-transform: scale(1.1) rotate(-10deg); -o-transform: scale(1.1) rotate(-10deg); transform: scale(1.1) rotate(-10deg); } 100% { -webkit-transform: scale(1) rotate(0deg); -khtml-transform: scale(1) rotate(0deg); -moz-transform: scale(1) rotate(0deg); -ms-transform: scale(1) rotate(0deg); -o-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); } } @-moz-keyframes bounce-and-spin { 0% { -webkit-transform: scale(0.6) rotate(90deg); -khtml-transform: scale(0.6) rotate(90deg); -moz-transform: scale(0.6) rotate(90deg); -ms-transform: scale(0.6) rotate(90deg); -o-transform: scale(0.6) rotate(90deg); transform: scale(0.6) rotate(90deg); } 80% { -webkit-transform: scale(1.1) rotate(-10deg); -khtml-transform: scale(1.1) rotate(-10deg); -moz-transform: scale(1.1) rotate(-10deg); -ms-transform: scale(1.1) rotate(-10deg); -o-transform: scale(1.1) rotate(-10deg); transform: scale(1.1) rotate(-10deg); } 100% { -webkit-transform: scale(1) rotate(0deg); -khtml-transform: scale(1) rotate(0deg); -moz-transform: scale(1) rotate(0deg); -ms-transform: scale(1) rotate(0deg); -o-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); } } @-ms-keyframes bounce-and-spin { 0% { -webkit-transform: scale(0.6) rotate(90deg); -khtml-transform: scale(0.6) rotate(90deg); -moz-transform: scale(0.6) rotate(90deg); -ms-transform: scale(0.6) rotate(90deg); -o-transform: scale(0.6) rotate(90deg); transform: scale(0.6) rotate(90deg); } 80% { -webkit-transform: scale(1.1) rotate(-10deg); -khtml-transform: scale(1.1) rotate(-10deg); -moz-transform: scale(1.1) rotate(-10deg); -ms-transform: scale(1.1) rotate(-10deg); -o-transform: scale(1.1) rotate(-10deg); transform: scale(1.1) rotate(-10deg); } 100% { -webkit-transform: scale(1) rotate(0deg); -khtml-transform: scale(1) rotate(0deg); -moz-transform: scale(1) rotate(0deg); -ms-transform: scale(1) rotate(0deg); -o-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); } } @-o-keyframes bounce-and-spin { 0% { -webkit-transform: scale(0.6) rotate(90deg); -khtml-transform: scale(0.6) rotate(90deg); -moz-transform: scale(0.6) rotate(90deg); -ms-transform: scale(0.6) rotate(90deg); -o-transform: scale(0.6) rotate(90deg); transform: scale(0.6) rotate(90deg); } 80% { -webkit-transform: scale(1.1) rotate(-10deg); -khtml-transform: scale(1.1) rotate(-10deg); -moz-transform: scale(1.1) rotate(-10deg); -ms-transform: scale(1.1) rotate(-10deg); -o-transform: scale(1.1) rotate(-10deg); transform: scale(1.1) rotate(-10deg); } 100% { -webkit-transform: scale(1) rotate(0deg); -khtml-transform: scale(1) rotate(0deg); -moz-transform: scale(1) rotate(0deg); -ms-transform: scale(1) rotate(0deg); -o-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); } } @keyframes bounce-and-spin { 0% { -webkit-transform: scale(0.6) rotate(90deg); -khtml-transform: scale(0.6) rotate(90deg); -moz-transform: scale(0.6) rotate(90deg); -ms-transform: scale(0.6) rotate(90deg); -o-transform: scale(0.6) rotate(90deg); transform: scale(0.6) rotate(90deg); } 80% { -webkit-transform: scale(1.1) rotate(-10deg); -khtml-transform: scale(1.1) rotate(-10deg); -moz-transform: scale(1.1) rotate(-10deg); -ms-transform: scale(1.1) rotate(-10deg); -o-transform: scale(1.1) rotate(-10deg); transform: scale(1.1) rotate(-10deg); } 100% { -webkit-transform: scale(1) rotate(0deg); -khtml-transform: scale(1) rotate(0deg); -moz-transform: scale(1) rotate(0deg); -ms-transform: scale(1) rotate(0deg); -o-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); } } @-webkit-keyframes pop-up-from-below { 0% { filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-opacity: 0; -khtml-opacity: 0; -moz-opacity: 0; -ms-opacity: 0; -o-opacity: 0; opacity: 0; -webkit-transform: translateY(100%); -khtml-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); } 70% { filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; -webkit-opacity: 1; -khtml-opacity: 1; -moz-opacity: 1; -ms-opacity: 1; -o-opacity: 1; opacity: 1; -webkit-transform: translateY(-20%); -khtml-transform: translateY(-20%); -moz-transform: translateY(-20%); -ms-transform: translateY(-20%); -o-transform: translateY(-20%); transform: translateY(-20%); } 100% { -webkit-transform: translateY(0); -khtml-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } @-moz-keyframes pop-up-from-below { 0% { filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-opacity: 0; -khtml-opacity: 0; -moz-opacity: 0; -ms-opacity: 0; -o-opacity: 0; opacity: 0; -webkit-transform: translateY(100%); -khtml-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); } 70% { filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; -webkit-opacity: 1; -khtml-opacity: 1; -moz-opacity: 1; -ms-opacity: 1; -o-opacity: 1; opacity: 1; -webkit-transform: translateY(-20%); -khtml-transform: translateY(-20%); -moz-transform: translateY(-20%); -ms-transform: translateY(-20%); -o-transform: translateY(-20%); transform: translateY(-20%); } 100% { -webkit-transform: translateY(0); -khtml-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } @-ms-keyframes pop-up-from-below { 0% { filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-opacity: 0; -khtml-opacity: 0; -moz-opacity: 0; -ms-opacity: 0; -o-opacity: 0; opacity: 0; -webkit-transform: translateY(100%); -khtml-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); } 70% { filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; -webkit-opacity: 1; -khtml-opacity: 1; -moz-opacity: 1; -ms-opacity: 1; -o-opacity: 1; opacity: 1; -webkit-transform: translateY(-20%); -khtml-transform: translateY(-20%); -moz-transform: translateY(-20%); -ms-transform: translateY(-20%); -o-transform: translateY(-20%); transform: translateY(-20%); } 100% { -webkit-transform: translateY(0); -khtml-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } @-o-keyframes pop-up-from-below { 0% { filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-opacity: 0; -khtml-opacity: 0; -moz-opacity: 0; -ms-opacity: 0; -o-opacity: 0; opacity: 0; -webkit-transform: translateY(100%); -khtml-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); } 70% { filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; -webkit-opacity: 1; -khtml-opacity: 1; -moz-opacity: 1; -ms-opacity: 1; -o-opacity: 1; opacity: 1; -webkit-transform: translateY(-20%); -khtml-transform: translateY(-20%); -moz-transform: translateY(-20%); -ms-transform: translateY(-20%); -o-transform: translateY(-20%); transform: translateY(-20%); } 100% { -webkit-transform: translateY(0); -khtml-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } @keyframes pop-up-from-below { 0% { filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-opacity: 0; -khtml-opacity: 0; -moz-opacity: 0; -ms-opacity: 0; -o-opacity: 0; opacity: 0; -webkit-transform: translateY(100%); -khtml-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); } 70% { filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; -webkit-opacity: 1; -khtml-opacity: 1; -moz-opacity: 1; -ms-opacity: 1; -o-opacity: 1; opacity: 1; -webkit-transform: translateY(-20%); -khtml-transform: translateY(-20%); -moz-transform: translateY(-20%); -ms-transform: translateY(-20%); -o-transform: translateY(-20%); transform: translateY(-20%); } 100% { -webkit-transform: translateY(0); -khtml-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes flash-background { 0% { background-color: #fff; box-shadow: 0 0 0 15px #fff; } 50% { background-color: #e8f0fb; box-shadow: 0 0 0 15px #e8f0fb; } 100% { background-color: #fff; box-shadow: 0 0 0 15px #fff; } } @-moz-keyframes flash-background { 0% { background-color: #fff; box-shadow: 0 0 0 15px #fff; } 50% { background-color: #e8f0fb; box-shadow: 0 0 0 15px #e8f0fb; } 100% { background-color: #fff; box-shadow: 0 0 0 15px #fff; } } @-ms-keyframes flash-background { 0% { background-color: #fff; box-shadow: 0 0 0 15px #fff; } 50% { background-color: #e8f0fb; box-shadow: 0 0 0 15px #e8f0fb; } 100% { background-color: #fff; box-shadow: 0 0 0 15px #fff; } } @-o-keyframes flash-background { 0% { background-color: #fff; box-shadow: 0 0 0 15px #fff; } 50% { background-color: #e8f0fb; box-shadow: 0 0 0 15px #e8f0fb; } 100% { background-color: #fff; box-shadow: 0 0 0 15px #fff; } } @keyframes flash-background { 0% { background-color: #fff; box-shadow: 0 0 0 15px #fff; } 50% { background-color: #e8f0fb; box-shadow: 0 0 0 15px #e8f0fb; } 100% { background-color: #fff; box-shadow: 0 0 0 15px #fff; } } .button, .secondary.button, .button-secondary, .button-ghost, .button-clear, .button-select-header { display: inline-block; padding: 0 15px; height: 2.5em; line-height: 2.5em; border-radius: 4px; text-align: center; border: none; font-family: inherit; font-size: inherit; font-weight: bold; letter-spacing: 0.4px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .button:disabled, .button-secondary:disabled, .button-ghost:disabled, .button-clear:disabled, .button-select-header:disabled, .disabled.button, .disabled.button-secondary, .disabled.button-ghost, .disabled.button-clear, .disabled.button-select-header { cursor: default; } .button + a, .secondary.button + a, .button-secondary + a, .button-ghost + a, .button-clear + a, .button-select-header + a, .button + button, .secondary.button + button, .button-secondary + button, .button-ghost + button, .button-clear + button, .button-select-header + button { margin-left: 15px; } .button { background: #FECB88; color: #765627; } .button:enabled:hover { background-color: #F2B769; color: #765627; } .button:enabled:active, .button:enabled.active, .button:enabled:focus { background-color: #ffeacf; color: #765627; } .button:disabled, .disabled.button { background-color: #fee1bb; } .secondary.button, .button-secondary { background-color: #7985a3; color: #fff; font-weight: normal; } .secondary.button:enabled:hover, .button-secondary:enabled:hover { color: #fff; background-color: #637090; } .secondary.button:enabled:focus, .button-secondary:enabled:focus, .secondary.button:enabled:active, .button-secondary:enabled:active, .secondary.button:enabled.active, .button-secondary:enabled.active { background-color: #919bb4; color: #fff; } .secondary.button:disabled, .button-secondary:disabled, .disabled.secondary.button, .disabled.button-secondary { background-color: #e3e5ec; } .button-ghost, .button-clear { background: none; color: inherit; } .button-ghost:enabled:hover, .button-clear:enabled:hover, .button-ghost:enabled:focus, .button-clear:enabled:focus, .button-ghost:enabled:active, .button-clear:enabled:active, .button-ghost:enabled.active, .button-clear:enabled.active { color: inherit; background: none; } .button-ghost { border: 1px solid #EEE; } .button-select-header { background-color: #77a9f8; color: #fff; } .button-select-header:enabled:hover, .button-select-header:enabled:focus, .button-select-header:enabled:active, .button-select-header:enabled.active { background-color: #69a0f8; color: #fff; } .button-select-header:disabled, .disabled.button-select-header { background-color: #5a97f7; } .loading { position: fixed; top: 50%; left: 50%; margin: -25px 0 0 -25px; width: 50px; height: 50px; overflow: hidden; vertical-align: middle; display: inline-block; font-family: "fontIcons"; } .loading:before { content: ''; } .hidden { display: none; } body { margin: 0; padding: 0; overflow-y: scroll; overflow-x: hidden; font-family: Arial, Verdana, sans-serif; color: #7985a3; position: relative; -webkit-font-smoothing: antialiased; font-size: 14px; line-height: 18px; } body.full-screen { overflow: hidden; } *, *:before, *:after { box-sizing: border-box; } a { text-decoration: none; color: #7985a3; } a:hover, a:active, a:focus { color: #3d7eda; } ul, li, ol { display: block; list-style: none; margin: 0; padding: 0; } figure, section, nav, aside, header, footer, progress { margin: 0; padding: 0; } p, h1, h2, h3, h4, h5 { margin: 0 0 15px 0; padding: 0; font-weight: normal; color: #7985a3; } p { color: #7985a3; } h1 { font-size: 4em; line-height: normal; } h2 { font-size: 3em; line-height: normal; } h3 { font-size: 2em; line-height: normal; } h4 { font-size: 1.5em; line-height: normal; } h5 { font-size: 1em; line-height: normal; font-weight: bold; } input::-ms-clear { display: none; } button { border: none; background: none; margin: 0; padding: 0; font: inherit; line-height: inherit; cursor: pointer; text-align: inherit; } button:disabled { cursor: default; opacity: 0.4; } button:active { outline: none; } @charset "UTF-8"; /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ /* ------------------------------------------------------------- Mixins meant to replace the use of z-index completely. These allow developers to focus on the intent of positioning as named layers. Each of these mixins accepts an $adjust value, which is there to allow you to prioritize multiple elements in the same layer. Mixins available: - layer-background Arguments: [$adjust] Adds approprite z-index value for elements that are meant to be below the page's main content - layer-midground Arguments: [$adjust] Adds appropriate z-index value for elements that are the page's primary content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that are meant to be priminent / above the main content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that should appear above everything else (IE - modals) ------------------------------------------------------------- */ #uploader-toast .close-uploader:before, #uploader-toast .uploader-message .message-content .queue-errors ul.queue-error-list li .error-list-file-name:before { font-family: "fontIcons"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; text-transform: none; } /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ .unpreviewable .filename { font-weight: bold; position: absolute; width: 100%; padding: 0 18px; bottom: 40px; text-align: center; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.tablet .unpreviewable .filename { bottom: 25px; } body.mobile .unpreviewable .filename { bottom: 15px; font-size: 11px; } .unpreviewable .content { text-align: center; font-weight: bold; color: #cdd2db; width: 75px; height: 75px; line-height: 75px; max-width: 75%; max-height: 75%; position: absolute; top: 50%; left: 50%; -webkit-transform: translateY(-50%) translateX(-50%); -khtml-transform: translateY(-50%) translateX(-50%); -moz-transform: translateY(-50%) translateX(-50%); -ms-transform: translateY(-50%) translateX(-50%); -o-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); } .unpreviewable .content svg { width: 58px; height: 58px; max-width: 100%; max-height: 100%; } .unpreviewable.video-node.video-processing button.play, .unpreviewable.video-node .content, .unpreviewable.video-node .icon { display: none; } .unpreviewable.video-node.video-processing .content { display: block; } .unpreviewable.video-node .duration { color: #a6aec0; text-shadow: none; } .infinite-scroll-list { position: relative; top: 10px; } .dialog.lightbox h1 { color: #47A7BC; text-align: center; font-size: 18px; margin: 15px 0 8px; letter-spacing: 0.29px; line-height: 24px; font-weight: bold; } .dialog.lightbox { text-align: center; } .dialog.lightbox h2 { font-size: 16px; color: #7985a3; font-weight: bold; margin-bottom: 8px; } .dialog.lightbox p { color: #a6aec0; font-size: 15px; letter-spacing: 0.3px; line-height: 22px; } .dialog.lightbox footer .button.call-to-action { height: 40px; line-height: 40px; width: 60%; min-width: 150px; } #uploader-toast.toast .column-2 .running-queue { font-weight: normal; } #uploader-toast .close-uploader { color: #fff; height: 20px; line-height: 20px; } #uploader-toast .close-uploader:before { content: "\E070"; font-size: 14px; line-height: 14px; vertical-align: middle; display: inline-block; height: inherit; line-height: inherit; } #uploader-toast .uploader-message .message-content .current-file { padding: 15px; font-weight: bold; } #uploader-toast .uploader-message .message-content .current-file ul { font-weight: normal; } #uploader-toast .uploader-message .message-content .successful-uploads { padding: 15px; } #uploader-toast .uploader-message .message-content .queue-errors { padding: 15px; border-top: 1px solid #ecedf2; overflow: auto; max-height: 109px; } #uploader-toast .uploader-message .message-content .queue-errors .batch-error-message { color: #777; } #uploader-toast .uploader-message .message-content .queue-errors ul.queue-error-list { padding: 0.8em 0; } #uploader-toast .uploader-message .message-content .queue-errors ul.queue-error-list li { padding: 2px 0; clear: both; } #uploader-toast .uploader-message .message-content .queue-errors ul.queue-error-list li .error-list-file-name { font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #uploader-toast .uploader-message .message-content .queue-errors ul.queue-error-list li .error-list-file-name:before { content: "\E01F"; font-size: 14px; line-height: 14px; vertical-align: middle; display: inline-block; margin-right: 12px; } #uploader-toast .uploader-message .message-content .queue-errors ul.queue-error-list li .error-list-message { float: right; margin-left: 10px; } #uploader-toast .uploader-message .app-links { border-top: 1px solid #ecedf2; padding: 15px; background-color: #f4f5f7; font-size: 0.857em; text-align: center; } #uploader-toast .uploader-message .app-links a { color: #3d7eda !important; margin: 0; font-weight: bold; } ul.folder-upload-options { margin: 1em 0 0 2em; list-style: initial; } ul.folder-upload-options li { list-style: initial; display: list-item; } .showToastDesktopApp .toast-additional-content { padding: 15px; } .showToastDesktopApp .toast-additional-content a { margin-left: 0px; white-space: normal; } .showToastDesktopApp .toast-additional-content a .highlight { font-weight: bold; } .app-content { margin: 0 auto; position: relative; padding: 0 25px; max-width: 1400px; min-width: 320px; } body.mobile .app-content { padding: 0 10px; } .app-content.body { padding-top: 105px; padding-bottom: 25px; } body.mobile .app-content.body { padding-top: 65px; padding-bottom: 10px; } body.no-header .app-content.body { padding-top: 30px; } .app-content .content-with-nav { margin-left: 200px; } body.mobile .app-content .content-with-nav { margin-left: 0; } button { color: #7985a3; } button:hover:enabled { color: #3d7eda; } .page-layout { position: relative; } .coming-soon { filter: alpha(opacity=30); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; -webkit-opacity: 0.3; -khtml-opacity: 0.3; -moz-opacity: 0.3; -ms-opacity: 0.3; -o-opacity: 0.3; opacity: 0.3; cursor: default; } .coming-soon * { cursor: default; } @charset "UTF-8"; /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ #primary-header .add-button .toggle, #primary-header .buy-prints-nav-item, #primary-header #sign-in { display: inline-block; padding: 0 15px; height: 2.5em; line-height: 2.5em; border-radius: 4px; text-align: center; border: none; font-family: inherit; font-size: inherit; font-weight: bold; letter-spacing: 0.4px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #primary-header .add-button .toggle:disabled, #primary-header .buy-prints-nav-item:disabled, #primary-header #sign-in:disabled, #primary-header .add-button .disabled.toggle, #primary-header .disabled.buy-prints-nav-item, #primary-header .disabled#sign-in { cursor: default; } #primary-header .add-button .toggle + a, #primary-header .buy-prints-nav-item + a, #primary-header #sign-in + a, #primary-header .add-button .toggle + button, #primary-header .buy-prints-nav-item + button, #primary-header #sign-in + button { margin-left: 15px; } #primary-header .add-button .toggle { background: #FECB88; color: #765627; } #primary-header .add-button .toggle:enabled:hover { background-color: #F2B769; color: #765627; } #primary-header .add-button .toggle:enabled:active, #primary-header .add-button .toggle:enabled.active, #primary-header .add-button .toggle:enabled:focus { background-color: #ffeacf; color: #765627; } #primary-header .add-button .toggle:disabled, #primary-header .add-button .disabled.toggle { background-color: #fee1bb; } #primary-header .add-button .secondary.toggle, #primary-header .buy-prints-nav-item { background-color: #7985a3; color: #fff; font-weight: normal; } #primary-header .add-button .secondary.toggle:enabled:hover, #primary-header .buy-prints-nav-item:enabled:hover { color: #fff; background-color: #637090; } #primary-header .add-button .secondary.toggle:enabled:focus, #primary-header .buy-prints-nav-item:enabled:focus, #primary-header .add-button .secondary.toggle:enabled:active, #primary-header .buy-prints-nav-item:enabled:active, #primary-header .add-button .secondary.toggle:enabled.active, #primary-header .buy-prints-nav-item:enabled.active { background-color: #919bb4; color: #fff; } #primary-header .add-button .secondary.toggle:disabled, #primary-header .buy-prints-nav-item:disabled, #primary-header .add-button .disabled.secondary.toggle, #primary-header .disabled.buy-prints-nav-item { background-color: #e3e5ec; } #primary-header #sign-in { background: none; color: inherit; } #primary-header #sign-in:enabled:hover, #primary-header #sign-in:enabled:focus, #primary-header #sign-in:enabled:active, #primary-header #sign-in:enabled.active { color: inherit; background: none; } /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ /* ------------------------------------------------------------- Mixins meant to replace the use of z-index completely. These allow developers to focus on the intent of positioning as named layers. Each of these mixins accepts an $adjust value, which is there to allow you to prioritize multiple elements in the same layer. Mixins available: - layer-background Arguments: [$adjust] Adds approprite z-index value for elements that are meant to be below the page's main content - layer-midground Arguments: [$adjust] Adds appropriate z-index value for elements that are the page's primary content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that are meant to be priminent / above the main content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that should appear above everything else (IE - modals) ------------------------------------------------------------- */ #primary-header .app-links .toggle:before, #primary-header .user-menu .toggle:after, #primary-header .user-menu a.settings:before, #primary-header .user-menu button.settings:before, #primary-header .user-menu a.get-apps:before, #primary-header .user-menu button.get-apps:before, #primary-header .user-menu a.feedback:before, #primary-header .user-menu button.feedback:before, #primary-header .user-menu a.help:before, #primary-header .user-menu button.help:before, #primary-header .user-menu a.print-orders-history:before, #primary-header .user-menu button.print-orders-history:before, #primary-header .user-menu a.share-history:before, #primary-header .user-menu button.share-history:before, #primary-header .user-menu a.hidden-items:before, #primary-header .user-menu button.hidden-items:before, #primary-header .user-menu a.signout:before, #primary-header .user-menu button.signout:before, #primary-header .user-menu a.switch-accounts:before, #primary-header .user-menu button.switch-accounts:before, #primary-header .user-menu a.family:before, #primary-header .user-menu button.family:before, #primary-header .add-button .toggle:before, #primary-header .amazon-prints-menu .toggle:before, #primary-header .amazon-prints-menu .toggle:after, #primary-header .amazon-prints-menu a.shop-amazon-prints:before, #primary-header .amazon-prints-menu button.shop-amazon-prints:before, #primary-header .amazon-prints-menu a.simple-book:before, #primary-header .amazon-prints-menu button.simple-book:before, #primary-header .amazon-prints-menu a.my-projects:before, #primary-header .amazon-prints-menu button.my-projects:before, #primary-header .amazon-prints-menu a.create-photo-book:before, #primary-header .amazon-prints-menu button.create-photo-book:before, #primary-header .amazon-prints-menu a.photo-cards:before, #primary-header .amazon-prints-menu button.photo-cards:before, #primary-header .amazon-prints-menu a.wall-decor:before, #primary-header .amazon-prints-menu button.wall-decor:before, #primary-header .amazon-prints-menu a.shop-all-products:before, #primary-header .amazon-prints-menu button.shop-all-products:before, #primary-header .buy-prints-nav-item:before, body.mobile #primary-header #sign-in.signed-in:before { font-family: "fontIcons"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; text-transform: none; } /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ #primary-header { position: fixed; top: 0; left: 0; right: 0; height: 75px; line-height: 75px; color: #fff; background-color: #232f40; background-image: -webkit-gradient(linear, left top, left bottom, from(#232f40), to(rgba(26, 35, 48, 0.95))); background-image: -webkit-linear-gradient(top, #232f40, rgba(26, 35, 48, 0.95)); background-image: -moz-linear-gradient(top, #232f40, rgba(26, 35, 48, 0.95)); background-image: -ms-linear-gradient(top, #232f40, rgba(26, 35, 48, 0.95)); background-image: -o-linear-gradient(top, #232f40, rgba(26, 35, 48, 0.95)); background-image: linear-gradient(top, #232f40, rgba(26, 35, 48, 0.95)); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#232f40', endColorStr='rgba(26, 35, 48, 0.95)'); background-color: transparent; z-index: 200; } .no-header #primary-header { display: none; } body.mobile #primary-header { height: 50px; line-height: 50px; } #primary-header .column.column-1 { text-align: left; white-space: nowrap; } #primary-header .column.column-1 .app-links { white-space: normal; } #primary-header .column.column-2 { text-align: center; } #primary-header .column.column-2 .column-size { width: 100%; position: absolute; min-width: 200px; display: block; } #primary-header .column.column-2.overflow + .column-3 .buy-prints-nav-item span { display: none; } #primary-header .column.column-3 { text-align: right; white-space: nowrap; } #primary-header .photos-logo { height: 100%; } #primary-header .photos-logo svg { display: inline-block; vertical-align: middle; } #primary-header .photos-logo.desktop { display: inline-block; } #primary-header .photos-logo.desktop svg { margin-left: 2px; position: relative; top: 3px; } #primary-header .photos-logo.mobile-web { display: none; margin-left: 10px; } body.mobile #primary-header .photos-logo.desktop { display: none; } body.mobile #primary-header .photos-logo.mobile-web { display: inline-block; } #primary-header #search-field { position: absolute; width: 100%; top: 0; left: 0; padding: 0 15px; -webkit-transition: border 333ms ease; -khtml-transition: border 333ms ease; -moz-transition: border 333ms ease; -ms-transition: border 333ms ease; -o-transition: border 333ms ease; transition: border 333ms ease; } body.mobile #primary-header #search-field { display: none; } #primary-header #search-field ::-webkit-input-placeholder { color: #bbc1d0; } #primary-header #search-field ::-moz-placeholder { color: #bbc1d0; } #primary-header #search-field :-ms-input-placeholder { color: #bbc1d0; } #primary-header .app-links { position: relative; float: left; height: 100%; margin-right: 30px; z-index: 100; } body.mobile #primary-header .app-links, body.tablet #primary-header .app-links { display: none; } #primary-header .app-links .toggle { position: relative; top: -2px; } #primary-header .app-links .toggle:before { content: "\E006"; font-size: 23px; line-height: 23px; vertical-align: middle; display: inline-block; color: rgba(255, 255, 255, 0.5); } #primary-header .app-links .toggle:after { content: ''; display: block; position: absolute; height: 25%; top: 39%; width: 1px; right: -15px; background: #475160; } #primary-header .app-links .toggle svg { vertical-align: middle; } #primary-header .app-links .expanded-nav { left: -11px; padding: 10px; } #primary-header .user-menu { position: relative; display: inline-block; margin-left: 15px; -webkit-transition: opacity 333ms ease; -khtml-transition: opacity 333ms ease; -moz-transition: opacity 333ms ease; -ms-transition: opacity 333ms ease; -o-transition: opacity 333ms ease; transition: opacity 333ms ease; } #primary-header .user-menu .expanded-nav { right: -10px; } body.mobile #primary-header .user-menu .expanded-nav { right: 2px; } #primary-header .user-menu .face { width: 33px; height: 33px; margin-right: 10px; vertical-align: middle; } #primary-header .user-menu .toggle { display: inline-block; position: relative; line-height: normal; padding: 10px; color: #fff !important; font-weight: bold; border-radius: 4px; font-weight: bold; } #primary-header .user-menu .toggle:after { content: "\E019"; font-size: 5px; line-height: 5px; vertical-align: middle; display: inline-block; display: inline-block; vertical-align: middle; margin-left: 10px; } #primary-header .user-menu .toggle:hover { border-color: rgba(255, 255, 255, 0.2); background: #fff; background: rgba(255, 255, 255, 0.1); } #primary-header .user-menu .name { max-width: 100px; display: inline-block; vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.mobile #primary-header .user-menu .name, body.tablet #primary-header .user-menu .name { display: none; } body.mobile #primary-header .user-menu, body.tablet #primary-header .user-menu { margin-left: 5px; } body.mobile #primary-header .user-menu .name, body.mobile #primary-header .user-menu .toggle:after, body.tablet #primary-header .user-menu .name, body.tablet #primary-header .user-menu .toggle:after { display: none; } body.mobile #primary-header .user-menu .face, body.tablet #primary-header .user-menu .face { margin: 0; } #primary-header .user-menu a:before, #primary-header .user-menu button:before { margin-right: 8px; width: 15px; text-align: center; } #primary-header .user-menu a.settings:before, #primary-header .user-menu button.settings:before { content: "\E055"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; } #primary-header .user-menu a.get-apps:before, #primary-header .user-menu button.get-apps:before { content: "\E01A"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; } #primary-header .user-menu a.feedback:before, #primary-header .user-menu button.feedback:before { content: "\E054"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; } #primary-header .user-menu a.help:before, #primary-header .user-menu button.help:before { content: "\E036"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; } #primary-header .user-menu a.print-orders-history:before, #primary-header .user-menu button.print-orders-history:before { content: "\E04B"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; } #primary-header .user-menu a.share-history:before, #primary-header .user-menu button.share-history:before { content: "\E056"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; } #primary-header .user-menu a.hidden-items:before, #primary-header .user-menu button.hidden-items:before { content: "\E037"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; } #primary-header .user-menu a.signout:before, #primary-header .user-menu button.signout:before { content: "\E058"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; } #primary-header .user-menu a.switch-accounts:before, #primary-header .user-menu button.switch-accounts:before { content: "\E058"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; } #primary-header .user-menu a.family:before, #primary-header .user-menu button.family:before { content: "\E022"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; } body.mobile #primary-header .user-menu a.help, body.mobile #primary-header .user-menu button.help { display: none; } #primary-header .add-button { display: inline-block; } #primary-header .add-button .toggle:before { content: "\E002"; font-size: 15px; line-height: 15px; vertical-align: middle; display: inline-block; line-height: normal; } #primary-header .add-button .toggle span { margin-left: 4px; } body.mobile #primary-header .add-button .toggle { width: 30px; height: 30px; line-height: 30px; padding: 0; } body.mobile #primary-header .add-button .toggle span { display: none; } #primary-header .amazon-prints-menu { position: relative; display: inline-block; margin-left: 15px; -webkit-transition: opacity 333ms ease; -khtml-transition: opacity 333ms ease; -moz-transition: opacity 333ms ease; -ms-transition: opacity 333ms ease; -o-transition: opacity 333ms ease; transition: opacity 333ms ease; } #primary-header .amazon-prints-menu span { margin-left: 7px; } #primary-header .amazon-prints-menu .toggle { display: inline-block; position: relative; line-height: 20px; padding-left: 10px; padding-right: 10px; height: 2.5em; color: #fff !important; border-radius: 4px; border-color: rgba(255, 255, 255, 0.2); font-weight: bold; background: #fff; background: rgba(255, 255, 255, 0.1); } #primary-header .amazon-prints-menu .toggle:before { content: "\E005"; font-size: 20px; line-height: 20px; vertical-align: middle; display: inline-block; vertical-align: top; } #primary-header .amazon-prints-menu .toggle:after { content: "\E019"; font-size: 5px; line-height: 5px; vertical-align: middle; display: inline-block; display: inline-block; vertical-align: middle; margin-left: 10px; } #primary-header .amazon-prints-menu .toggle:hover { background: rgba(255, 255, 255, 0.2); } #primary-header .amazon-prints-menu a.shop-amazon-prints:before, #primary-header .amazon-prints-menu button.shop-amazon-prints:before { content: "\E04B"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; } #primary-header .amazon-prints-menu a.simple-book:before, #primary-header .amazon-prints-menu button.simple-book:before { content: "\E003"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; } #primary-header .amazon-prints-menu a.my-projects:before, #primary-header .amazon-prints-menu button.my-projects:before { content: "\E003"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; } #primary-header .amazon-prints-menu a.create-photo-book:before, #primary-header .amazon-prints-menu button.create-photo-book:before { content: "\E003"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; } #primary-header .amazon-prints-menu a.photo-cards:before, #primary-header .amazon-prints-menu button.photo-cards:before { content: "\E047"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; } #primary-header .amazon-prints-menu a.wall-decor:before, #primary-header .amazon-prints-menu button.wall-decor:before { content: "\E06E"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; } #primary-header .amazon-prints-menu a.shop-all-products:before, #primary-header .amazon-prints-menu button.shop-all-products:before { content: "\E04B"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; } #primary-header .amazon-prints-menu a:before, #primary-header .amazon-prints-menu button:before { width: 12px; text-align: center; } body.mobile #primary-header .amazon-prints-menu .toggle { width: 30px; height: 30px; line-height: 30px; padding: 0; } body.mobile #primary-header .amazon-prints-menu .toggle span { display: none; } body.mobile #primary-header .amazon-prints-menu .toggle:before { line-height: 31px; width: 100%; } body.mobile #primary-header .amazon-prints-menu .toggle:after { display: none; } #primary-header .buy-prints-nav-item { margin-left: 15px; vertical-align: middle; background: rgba(255, 255, 255, 0.1); } #primary-header .buy-prints-nav-item:before { content: "\E04B"; font-size: 15px; line-height: 15px; vertical-align: middle; display: inline-block; line-height: inherit; vertical-align: top; } #primary-header .buy-prints-nav-item span { margin-left: 4px; font-weight: bold; } #primary-header .buy-prints-nav-item:hover { background: rgba(255, 255, 255, 0.2); } body.mobile #primary-header .buy-prints-nav-item { width: 30px; height: 30px; padding: 0; } body.mobile #primary-header .buy-prints-nav-item span { display: none; } body.mobile #primary-header .buy-prints-nav-item:before { line-height: 31px; } #primary-header .overflow .buy-prints-nav-item { display: none; } #primary-header .expanded-nav { line-height: normal; top: 65px; } body.mobile #primary-header .expanded-nav { top: 45px; } #primary-header #sign-in { vertical-align: middle; border: 1px solid rgba(255, 255, 255, 0.5); color: #fff; } body.mobile #primary-header #sign-in.signed-in:before { content: "\E038"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; } body.mobile #primary-header #sign-in.signed-in span { display: none; } @charset "UTF-8"; /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ #search-field > button { display: inline-block; padding: 0 15px; height: 2.5em; line-height: 2.5em; border-radius: 4px; text-align: center; border: none; font-family: inherit; font-size: inherit; font-weight: bold; letter-spacing: 0.4px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #search-field > button:disabled, #search-field > button.disabled { cursor: default; } #search-field > button + a, #search-field > button + button { margin-left: 15px; } #search-field > button { background: #FECB88; color: #765627; } #search-field > button:enabled:hover { background-color: #F2B769; color: #765627; } #search-field > button:enabled:active, #search-field > button:enabled.active, #search-field > button:enabled:focus { background-color: #ffeacf; color: #765627; } #search-field > button:disabled, #search-field > button.disabled { background-color: #fee1bb; } #search-field > button.secondary { background-color: #7985a3; color: #fff; font-weight: normal; } #search-field > button.secondary:enabled:hover { color: #fff; background-color: #637090; } #search-field > button.secondary:enabled:focus, #search-field > button.secondary:enabled:active, #search-field > button.secondary:enabled.active { background-color: #919bb4; color: #fff; } #search-field > button.secondary:disabled, #search-field > button.disabled.secondary { background-color: #e3e5ec; } /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ /* ------------------------------------------------------------- Mixins meant to replace the use of z-index completely. These allow developers to focus on the intent of positioning as named layers. Each of these mixins accepts an $adjust value, which is there to allow you to prioritize multiple elements in the same layer. Mixins available: - layer-background Arguments: [$adjust] Adds approprite z-index value for elements that are meant to be below the page's main content - layer-midground Arguments: [$adjust] Adds appropriate z-index value for elements that are the page's primary content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that are meant to be priminent / above the main content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that should appear above everything else (IE - modals) ------------------------------------------------------------- */ #search-field .auto-complete-widget .result li .faces:before, #search-field .auto-complete-widget .result li .people:before, #search-field .auto-complete-widget .result li .location:before, #search-field .auto-complete-widget .result li .albums:before, #search-field .auto-complete-widget .result li .things:before, #search-field .auto-complete-widget .result li .time:before, #search-field > button:before { font-family: "fontIcons"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; text-transform: none; } /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ #search-field .auto-complete-widget { display: inline-block; width: calc(100% - 50px); } #search-field .auto-complete-widget .result li .faces:before, #search-field .auto-complete-widget .result li .people:before { content: "\E021"; font-size: 12px; line-height: 12px; vertical-align: middle; display: inline-block; color: #fea083; } #search-field .auto-complete-widget .result li .location:before { content: "\E03E"; font-size: 12px; line-height: 12px; vertical-align: middle; display: inline-block; color: #27C727; } #search-field .auto-complete-widget .result li .albums:before { content: "\E003"; font-size: 12px; line-height: 12px; vertical-align: middle; display: inline-block; color: #957BFF; } #search-field .auto-complete-widget .result li .things:before { content: "\E048"; font-size: 12px; line-height: 12px; vertical-align: middle; display: inline-block; color: #3a88f5; } #search-field .auto-complete-widget .result li .time:before { content: "\E05B"; font-size: 12px; line-height: 12px; vertical-align: middle; display: inline-block; color: #f78495; } #search-field .auto-complete-widget .result li > :before { margin-right: 8px; } #search-field .auto-complete-widget .result li .highlighted { font-weight: bold; color: #333; } #search-field .auto-complete-widget input { height: 2.5em; line-height: 2.5em; } #search-field > button { width: 50px; border-top-left-radius: 0px; border-bottom-left-radius: 0px; vertical-align: middle; } #search-field > button:before { content: "\E052"; font-size: 15px; line-height: 15px; vertical-align: middle; display: inline-block; display: block; } @charset "UTF-8"; /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ /* ------------------------------------------------------------- Mixins meant to replace the use of z-index completely. These allow developers to focus on the intent of positioning as named layers. Each of these mixins accepts an $adjust value, which is there to allow you to prioritize multiple elements in the same layer. Mixins available: - layer-background Arguments: [$adjust] Adds approprite z-index value for elements that are meant to be below the page's main content - layer-midground Arguments: [$adjust] Adds appropriate z-index value for elements that are the page's primary content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that are meant to be priminent / above the main content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that should appear above everything else (IE - modals) ------------------------------------------------------------- */ /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ .auto-complete-widget { line-height: 0px; position: relative; } .auto-complete-widget input { vertical-align: middle; font-size: 1em; height: 100%; width: 100%; padding: 8px 0px 8px 12px; text-align: left; border-radius: 4px 0 0 4px; border: solid 1px #fff; color: #333; } .auto-complete-widget input:focus { outline: none; } .auto-complete-widget input.showing { border-radius: 4px 0 0 0; } .auto-complete-widget .result { position: absolute; left: 0; right: 0; text-align: left; line-height: 28px; background: #fff; color: #777; border-radius: 0 0 4px 4px; box-shadow: 2px 9px 12px 0px rgba(5, 5, 5, 0.1); } .auto-complete-widget .result li { cursor: pointer; vertical-align: middle; padding: 0 12px; } .auto-complete-widget .result li.selected { background: #3d7eda; background: rgba(61, 126, 218, 0.15); } .auto-complete-widget .result li:last-child { padding-bottom: 7px; } .simple-button-dialog { width: 450px; } .simple-button-dialog .dialog-content { text-align: center; } .simple-button-dialog footer { padding: 0 7.5px 15px 7.5px; } .simple-button-dialog .options .button { margin: 15px 7.5px 0 7.5px; min-width: 90px; } .simple-button-dialog ul.simple-dialog-list { display: table; text-align: left; width: auto; margin: 15px auto 0 auto; line-height: 1.4em; } .simple-button-dialog ul.simple-dialog-list li { display: list-item; list-style: outside disc; padding-left: 5px; max-width: 300px; } .simple-button-dialog .confirm-check { display: flex; margin: 0 auto; max-width: 250px; text-align: left; padding: 15px 0; } .simple-button-dialog .confirm-check input { flex-shrink: 1; margin-right: 15px; } @charset "UTF-8"; /* ------------------------------------------------------------- Mixins meant to replace the use of z-index completely. These allow developers to focus on the intent of positioning as named layers. Each of these mixins accepts an $adjust value, which is there to allow you to prioritize multiple elements in the same layer. Mixins available: - layer-background Arguments: [$adjust] Adds approprite z-index value for elements that are meant to be below the page's main content - layer-midground Arguments: [$adjust] Adds appropriate z-index value for elements that are the page's primary content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that are meant to be priminent / above the main content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that should appear above everything else (IE - modals) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ .dialog-overlay > .close:before, .dialog .close:before, .dialog .dialog-head .back:before { font-family: "fontIcons"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; text-transform: none; } /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ .dialog-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; overflow-y: auto; overflow-x: hidden; z-index: 301; background: #232f40; background: rgba(35, 47, 64, 0.9); } .dialog-overlay.absolute { position: absolute; bottom: auto; -webkit-transition: top 100ms ease; -khtml-transition: top 100ms ease; -moz-transition: top 100ms ease; -ms-transition: top 100ms ease; -o-transition: top 100ms ease; transition: top 100ms ease; } .dialog-overlay > .close { position: absolute; top: 25px; right: 25px; border-radius: 50%; width: 25px; height: 25px; line-height: 25px; text-align: center; background: #fff; opacity: 0.9; color: #232f40; } .dialog-overlay > .close:before { content: "\E070"; font-size: 11px; line-height: 11px; vertical-align: middle; display: inline-block; line-height: 24px; } .dialog-overlay > .close:hover { opacity: 1; } .dialog { max-width: 100%; max-height: 100%; min-width: 320px; box-shadow: 0 0 15px rgba(5, 5, 5, 0.4); border-radius: 8px; position: absolute; top: 50%; left: 50%; -webkit-transform: translateY(-50%) translateX(-50%); -khtml-transform: translateY(-50%) translateX(-50%); -moz-transform: translateY(-50%) translateX(-50%); -ms-transform: translateY(-50%) translateX(-50%); -o-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); } .dialog:after { position: absolute; content: ''; height: 1px; width: 100%; bottom: 0; -webkit-transition: bottom 333ms; -khtml-transition: bottom 333ms; -moz-transition: bottom 333ms; -ms-transition: bottom 333ms; -o-transition: bottom 333ms; transition: bottom 333ms; } .dialog.keyboard-padding:after { bottom: -250px; } .dialog .dialog-content { background: #fff; border-radius: 8px; padding: 20px; position: relative; overflow: hidden; margin: -1px 0; } .dialog .close { position: absolute; top: 0; right: 0; text-align: center; height: 60px; width: 60px; z-index: 200; } .dialog .close:before { content: "\E070"; font-size: 12px; line-height: 12px; vertical-align: middle; display: inline-block; display: inline-block; vertical-align: middle; } .dialog .dialog-head { font-size: 1.1em; margin: 0; padding: 20px; line-height: 20px; color: #fff; background: #3d7eda; position: relative; border-radius: 8px 8px 0 0; font-weight: bold; text-align: center; } .dialog .dialog-head:before { margin-right: 0.5em; } .dialog .dialog-head a, .dialog .dialog-head button, .dialog .dialog-head a:hover { color: inherit; } .dialog .dialog-head .back { float: left; margin-left: -20px; } .dialog .dialog-head .back:before { content: "\E007"; font-size: 10px; line-height: 10px; vertical-align: middle; display: inline-block; vertical-align: middle; margin-right: 5px; } .dialog .close + .dialog-head { padding: 20px 40px; } .dialog.with-header .dialog-content { border-top-left-radius: 0; border-top-right-radius: 0; } .dialog.with-header .close { color: #fff; } .dialog footer { position: relative; border-radius: 0 0 8px 8px; border-top: 1px solid #EEE; background: #F6F7FD; padding: 15px 20px; text-align: center; overflow: hidden; } .dialog.with-footer .dialog-content { border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .dialog .progress { height: 5px; display: block; position: relative; background: #F6F7FD; } .dialog .progress span { display: block; height: 5px; background: #ff9900; position: relative; z-index: 100; -webkit-transition: width 500ms ease; -khtml-transition: width 500ms ease; -moz-transition: width 500ms ease; -ms-transition: width 500ms ease; -o-transition: width 500ms ease; transition: width 500ms ease; } .dialog:not(.with-header) .progress { border-radius: 8px 8px 0 0; overflow: hidden; top: 4px; } @charset "UTF-8"; /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ /* ------------------------------------------------------------- Mixins meant to replace the use of z-index completely. These allow developers to focus on the intent of positioning as named layers. Each of these mixins accepts an $adjust value, which is there to allow you to prioritize multiple elements in the same layer. Mixins available: - layer-background Arguments: [$adjust] Adds approprite z-index value for elements that are meant to be below the page's main content - layer-midground Arguments: [$adjust] Adds appropriate z-index value for elements that are the page's primary content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that are meant to be priminent / above the main content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that should appear above everything else (IE - modals) ------------------------------------------------------------- */ /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ body.tablet .photos-signup, body.desktop .photos-signup { max-width: 460px; } .photos-signup .dialog-content { text-align: center; padding: 30px 74px 37px; } body.tablet .photos-signup .dialog-content { padding: 30px; } body.mobile .photos-signup .dialog-content { padding: 10px; } .photos-signup #photos-signup-logo { margin: 5px 0 15px 0; } body.mobile .photos-signup #photos-signup-logo { margin-top: 10px; } .photos-signup h1 { font-size: 1.2em; color: #59637a; font-weight: bold; } .photos-signup hr { margin: 25px -16px; background-color: #EEE; height: 2px; border: 0; } body.mobile .photos-signup hr { margin: 25px 0; } .photos-signup p { line-height: 1.3em; } .photos-signup .button { margin-top: 10px; margin-bottom: 10px; min-width: 90%; height: inherit; } .photos-signup .signup-link span { display: block; } .photos-signup .signup-link .detail { font-weight: normal; font-size: 0.95em; line-height: 1em; margin-bottom: 8px; } .photos-signup .different-account { color: #3a89f6; text-decoration: underline; } .photos-signup .clouddrive-link { background-color: #59637a; color: #fff; font-weight: normal; } @charset "UTF-8"; /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ .dialog.onboarding-dialog input { font-size: 12px; border: 1px solid #EEE; padding: 5px 10px; display: inline-block; background: #fff; border-radius: 5px; box-shadow: inset 0px 2px 0px 0px rgba(0, 0, 0, 0.05); outline: none; } /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ /* ------------------------------------------------------------- Mixins meant to replace the use of z-index completely. These allow developers to focus on the intent of positioning as named layers. Each of these mixins accepts an $adjust value, which is there to allow you to prioritize multiple elements in the same layer. Mixins available: - layer-background Arguments: [$adjust] Adds approprite z-index value for elements that are meant to be below the page's main content - layer-midground Arguments: [$adjust] Adds appropriate z-index value for elements that are the page's primary content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that are meant to be priminent / above the main content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that should appear above everything else (IE - modals) ------------------------------------------------------------- */ .dialog.onboarding-dialog .button.next:after { font-family: "fontIcons"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; text-transform: none; } /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ .dialog.onboarding-dialog h1 { color: #47A7BC; text-align: center; font-size: 18px; margin: 15px 0 8px; letter-spacing: 0.29px; line-height: 24px; font-weight: bold; } .dialog.onboarding-dialog { width: 460px; } body.mobile .dialog.onboarding-dialog { width: auto; max-width: 460px; } .dialog.onboarding-dialog h2 { font-size: 1.2em; color: #333; margin-top: 25px; } .dialog.onboarding-dialog h3 { font-size: 16px; color: #28374a; font-weight: bold; margin-bottom: 5px; } .dialog.onboarding-dialog h4 { font-size: 16px; color: #777; } .dialog.onboarding-dialog p { color: #a6aec0; font-size: 1.15em; text-align: center; margin: 0 3.5em; letter-spacing: 0.3px; line-height: 24px; } .dialog.onboarding-dialog p.errorMessage { color: #ff0000; margin-bottom: 1em; } .dialog.onboarding-dialog a { color: #2f78dc; } .dialog.onboarding-dialog .dialog-content { padding: 0; overflow: visible; border-radius: 8px; } .dialog.onboarding-dialog .progress-text { color: #fff; position: absolute; width: 100%; text-align: center; bottom: -40px; left: 0; } .dialog.onboarding-dialog .photos-logo { margin-bottom: 8px; } .dialog.onboarding-dialog .main-image { display: block; text-align: center; margin: 0 auto; } .dialog.onboarding-dialog .main-image img { margin-top: 15px; max-width: 100%; } .dialog.onboarding-dialog .preload-image { display: block; text-align: center; } .dialog.onboarding-dialog .dialog-body { padding-top: 1px; text-align: center; padding-bottom: 40px; min-height: 373px; position: relative; } .dialog.onboarding-dialog .progress-dots { position: absolute; bottom: 20px; } .dialog.onboarding-dialog .progress-dots .dot { opacity: 0.6; cursor: pointer; } .dialog.onboarding-dialog .progress-dots .dot.active { opacity: 1; background: #FECB88; } .dialog.onboarding-dialog .dialog-footer { border-top: 2px solid #f4f5f7; display: inline-block; width: 100%; padding: 25px; text-align: center; } .dialog.onboarding-dialog .button, .dialog.onboarding-dialog .button-secondary { height: 39px; line-height: 39px; vertical-align: top; } .dialog.onboarding-dialog .button.next, .dialog.onboarding-dialog .button.done { padding: 0 50px; } .dialog.onboarding-dialog .button.next { text-overflow: inherit; } .dialog.onboarding-dialog .button.next:after { content: "\E007"; font-size: 9px; line-height: 9px; vertical-align: middle; display: inline-block; margin-left: 1em; -webkit-transform: rotate(180deg); -khtml-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .dialog.onboarding-dialog input { margin: 15px; width: calc(100% - 30px); max-width: 317px; height: 39px; vertical-align: top; box-shadow: none; font-size: 1em; } .dialog.onboarding-dialog .onboarding-form { text-align: center; } .dialog.onboarding-dialog .onboarding-form .error { display: block; color: #ff0000; } .dialog.onboarding-dialog .onboarding-form label { position: relative; } .dialog.onboarding-dialog .slide.web_splash .main-image img { margin-top: -30px; width: 333px; } .dialog.onboarding-dialog .slide.web_splash h1 { margin: 0px 0px 15px 0px; font-size: 16px; } .dialog.onboarding-dialog .slide.web_splash .sub-heading { font-weight: bold; color: #777; margin-bottom: 15px; } .dialog.onboarding-dialog .slide.web_splash .try-prime-free { margin: 15px 0; color: #fff; background: #7985a3; } .dialog.onboarding-dialog .slide.web_splash p.splash-intro { margin: 0 2em; } .dialog.onboarding-dialog .slide.web_splash h3 { margin: 10px 0; } .dialog.onboarding-dialog .slide.web_splash .non-prime.dialog-body { padding-bottom: 10px; } .dialog.onboarding-dialog .slide.search .main-image img { width: 261px; margin-top: -75px; } .dialog.onboarding-dialog .slide.search a { display: inline-block; margin-top: 15px; } .dialog.onboarding-dialog .slide.search .recog-toggle-container .toggle-switch .label { text-transform: none; } .dialog.onboarding-dialog .slide.search .recog-toggle-container { margin-top: 15px; } .dialog.onboarding-dialog .slide.search .recog-toggle-container span { margin-right: 10px; color: #a6aec0; font-size: 1.15em; } .dialog.onboarding-dialog .slide.family_vault .dialog-body { background: #47A7BC; border-radius: 8px 8px 0 0; } .dialog.onboarding-dialog .slide.family_vault .dialog-body p, .dialog.onboarding-dialog .slide.family_vault .dialog-body h1, .dialog.onboarding-dialog .slide.family_vault .dialog-body h2 { color: #fff; } .dialog.onboarding-dialog .slide.family_vault .slide-1 .main-image img { width: 367px; margin-top: -21px; } .dialog.onboarding-dialog .slide.family_vault .slide-2 .main-image img { width: 348px; margin-top: 16px; } .dialog.onboarding-dialog .slide.family_vault .slide-3 .main-image img { width: 264px; margin-top: -33px; } .dialog.onboarding-dialog .slide.app_download .main-image img { margin-top: -25px; } .dialog.onboarding-dialog .slide.app_download .onboarding-form { margin-top: 15px; } .dialog.onboarding-dialog .slide.app_download .onboarding-form input { margin: 0 10px; } .dialog.onboarding-dialog .slide.app_download .onboarding-form .error { position: absolute; top: 49px; left: 0; right: -50px; } .dialog.onboarding-dialog .slide.app_download .download-btn { margin: 15px 0; } .dialog.onboarding-dialog .slide.app_download .small { font-size: 12px; } .dialog.onboarding-dialog .slide.invitee_error .main-image img, .dialog.onboarding-dialog .slide.invitee_welcome .main-image img { width: 265px; } .dialog.onboarding-dialog .slide.invitee_error .legalNotice, .dialog.onboarding-dialog .slide.invitee_welcome .legalNotice { font-size: 11px; line-height: 12px; margin-top: 15px; } .dialog.onboarding-dialog .slide.invitee_welcome h1 { margin-top: 30px; } .dialog.onboarding-dialog .slide.invitee_welcome p { margin-top: 13px; } .dialog.onboarding-dialog .slide.invitee_welcome .dialog-body { min-height: 327px; padding-bottom: 0; } .dialog.onboarding-dialog .slide.invitee_welcome .dialog-footer { border: none; } .dialog.onboarding-dialog .slide.invitee_welcome button { display: block; margin: 10px auto; } .dialog.onboarding-dialog .slide.invite_by_email .main-image img { width: 265px; margin-top: -70px; } @charset "UTF-8"; /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ .preload-image * { filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-opacity: 0; -khtml-opacity: 0; -moz-opacity: 0; -ms-opacity: 0; -o-opacity: 0; opacity: 0; -webkit-transition: opacity 100ms ease; -khtml-transition: opacity 100ms ease; -moz-transition: opacity 100ms ease; -ms-transition: opacity 100ms ease; -o-transition: opacity 100ms ease; transition: opacity 100ms ease; } .preload-image.placeholder *, .preload-image.loaded * { filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; -webkit-opacity: 1; -khtml-opacity: 1; -moz-opacity: 1; -ms-opacity: 1; -o-opacity: 1; opacity: 1; } .preload-image .bg-image { display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: center center no-repeat; -webkit-background-size: cover; -khtml-background-size: cover; -moz-background-size: cover; -ms-background-size: cover; -o-background-size: cover; background-size: cover; image-rendering: -webkit-optimize-contrast; } .preload-image .loading { position: absolute; width: 24px; height: 24px; margin: -12px 0 0 -12px; filter: alpha(opacity=10); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)"; -webkit-opacity: 0.1; -khtml-opacity: 0.1; -moz-opacity: 0.1; -ms-opacity: 0.1; -o-opacity: 0.1; opacity: 0.1; } .preload-image img { display: inline-block; margin: 0; padding: 0; } @charset "UTF-8"; /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ /* ------------------------------------------------------------- Mixins meant to replace the use of z-index completely. These allow developers to focus on the intent of positioning as named layers. Each of these mixins accepts an $adjust value, which is there to allow you to prioritize multiple elements in the same layer. Mixins available: - layer-background Arguments: [$adjust] Adds approprite z-index value for elements that are meant to be below the page's main content - layer-midground Arguments: [$adjust] Adds appropriate z-index value for elements that are the page's primary content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that are meant to be priminent / above the main content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that should appear above everything else (IE - modals) ------------------------------------------------------------- */ /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ .toggle-switch input[type=checkbox] { opacity: 0; position: absolute; } .toggle-switch .label { cursor: pointer; display: inline-block; font-weight: bold; height: 20px; line-height: 20px; padding-left: 40px; position: relative; text-transform: uppercase; } .toggle-switch .label:before { background: rgba(166, 174, 192, 0.5); border-radius: 10px; bottom: 3px; content: ''; display: block; left: 3px; position: absolute; top: 3px; transition: background 333ms ease; width: 37px; } .toggle-switch .label:after { background: #fff; border-radius: 50%; box-shadow: 1px 1px 5px rgba(5, 5, 5, 0.65); content: ''; display: block; height: 20px; left: 0; position: absolute; top: 0; transition: left 333ms ease, background 333ms ease; width: 20px; } .toggle-switch .label > span { margin-left: 10px; } .toggle-switch input:checked + .label:before { background: rgba(61, 126, 218, 0.5); } .toggle-switch input:checked + .label:after { background: #3d7eda; left: 20px; } .toggle-switch input:disabled + .label:before { background: rgba(255, 255, 255, 0.5); } .toggle-switch input:disabled + .label:after { background: white; } .toggle-switch input:disabled:checked + .label:before { background: rgba(189, 211, 243, 0.5); } .toggle-switch input:disabled:checked + .label:after { background: #bdd3f3; } @charset "UTF-8"; /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ /* ------------------------------------------------------------- Mixins meant to replace the use of z-index completely. These allow developers to focus on the intent of positioning as named layers. Each of these mixins accepts an $adjust value, which is there to allow you to prioritize multiple elements in the same layer. Mixins available: - layer-background Arguments: [$adjust] Adds approprite z-index value for elements that are meant to be below the page's main content - layer-midground Arguments: [$adjust] Adds appropriate z-index value for elements that are the page's primary content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that are meant to be priminent / above the main content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that should appear above everything else (IE - modals) ------------------------------------------------------------- */ /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ .progress-dots { position: absolute; bottom: -40px; position: absolute; left: 50%; -webkit-transform: translateX(-50%); -khtml-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } .progress-dots .dot { width: 6px; height: 6px; display: inline-block; margin: 0 6px; border-radius: 6px; background-color: white; } .progress-dots .dot.active { background-color: #3a89f6; width: 12px; } @charset "UTF-8"; /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ /* ------------------------------------------------------------- Mixins meant to replace the use of z-index completely. These allow developers to focus on the intent of positioning as named layers. Each of these mixins accepts an $adjust value, which is there to allow you to prioritize multiple elements in the same layer. Mixins available: - layer-background Arguments: [$adjust] Adds approprite z-index value for elements that are meant to be below the page's main content - layer-midground Arguments: [$adjust] Adds appropriate z-index value for elements that are the page's primary content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that are meant to be priminent / above the main content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that should appear above everything else (IE - modals) ------------------------------------------------------------- */ /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ .dialog.site-unavailable { text-align: center; width: 100%; max-width: 460px; } .dialog.site-unavailable .dialog-content { padding-top: 40px; padding-bottom: 40px; } .dialog.site-unavailable h1, .dialog.site-unavailable p, .dialog.site-unavailable hr, .dialog.site-unavailable .button { display: block; max-width: 300px; margin: 25px auto 0 auto; } .dialog.site-unavailable .button { margin-top: 16px; max-width: 225px; } .dialog.site-unavailable hr { margin-top: 35px; border: 1px solid #EEE; max-width: 385px; } .dialog.site-unavailable h1 { font-size: 1.2em; color: #7985a3; font-weight: bold; } .dialog.settings-confirm-dialog h2 { font-size: 1.1em; font-weight: bold; } .dialog.settings-confirm-dialog h3 { font-size: 1em; } .dialog.settings-confirm-dialog li { padding: 10px 0; } .dialog.settings-confirm-dialog label { display: block; } .dialog.settings-confirm-dialog input { vertical-align: top; margin-right: 10px; } .dialog.settings-confirm-dialog input + label { display: inline-block; width: calc(100% - 30px); } .dialog.settings-confirm-dialog .dialog-content { text-align: left; } .dialog.settings-confirm-dialog p:last-child { margin-bottom: 0; } @charset "UTF-8"; /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ /* ------------------------------------------------------------- Mixins meant to replace the use of z-index completely. These allow developers to focus on the intent of positioning as named layers. Each of these mixins accepts an $adjust value, which is there to allow you to prioritize multiple elements in the same layer. Mixins available: - layer-background Arguments: [$adjust] Adds approprite z-index value for elements that are meant to be below the page's main content - layer-midground Arguments: [$adjust] Adds appropriate z-index value for elements that are the page's primary content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that are meant to be priminent / above the main content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that should appear above everything else (IE - modals) ------------------------------------------------------------- */ /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ #app-nav { color: #7985a3; text-align: center; } body.mobile #app-nav { width: 100%; } #app-nav ul { display: block; white-space: nowrap; overflow: auto; margin: 0; padding: 0; } #app-nav ul a { font-weight: bold; } #app-nav li { display: inline-block; padding: 0 15px 15px 15px; text-transform: uppercase; } #app-nav li .clouddrive { position: relative; } #app-nav li .clouddrive:after { content: ''; display: block; position: absolute; height: 55%; top: 34%; width: 1px; right: -15px; background: #EEE; } #app-nav li .clouddrive svg { width: 95px; } #app-nav section { padding-top: 24px; padding-bottom: 17px; border-top: 1px solid #EEE; } #app-nav section p { margin: 15px auto; width: 70%; } #app-nav .app-logo { display: block; text-align: center; height: 60px; line-height: 60px; } #app-nav .app-logo svg { display: inline; vertical-align: middle; } #app-nav .button { text-transform: none; } @charset "UTF-8"; /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins meant to replace the use of z-index completely. These allow developers to focus on the intent of positioning as named layers. Each of these mixins accepts an $adjust value, which is there to allow you to prioritize multiple elements in the same layer. Mixins available: - layer-background Arguments: [$adjust] Adds approprite z-index value for elements that are meant to be below the page's main content - layer-midground Arguments: [$adjust] Adds appropriate z-index value for elements that are the page's primary content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that are meant to be priminent / above the main content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that should appear above everything else (IE - modals) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ .expandable-nav { display: inline-block; position: relative; text-align: left; } .expandable-nav .toggle, .expandable-nav .toggle:before { display: inline-block; vertical-align: middle; line-height: inherit; } .expandable-nav .icon.icon-more { min-width: 25px; text-align: center; } .expandable-nav .expanded-nav { background: white; border-radius: 4px; top: 100%; background: #fff; box-shadow: 0 2px 10px rgba(35, 47, 64, 0.2); min-width: 150px; padding: 6px 13px; position: absolute; border: 1px solid #EEE; z-index: 300; filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-opacity: 0; -khtml-opacity: 0; -moz-opacity: 0; -ms-opacity: 0; -o-opacity: 0; opacity: 0; -webkit-transition: opacity 333ms ease; -khtml-transition: opacity 333ms ease; -moz-transition: opacity 333ms ease; -ms-transition: opacity 333ms ease; -o-transition: opacity 333ms ease; transition: opacity 333ms ease; } .expandable-nav .expanded-nav.center { position: absolute; left: 50%; -webkit-transform: translateX(-50%); -khtml-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } .expandable-nav .expanded-nav.center:before, .expandable-nav .expanded-nav.center:after { position: absolute; left: 50%; -webkit-transform: translateX(-50%); -khtml-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } .expandable-nav .expanded-nav.left { left: -15px; } .expandable-nav .expanded-nav.left:before { left: 14px; } .expandable-nav .expanded-nav.left:after { left: 15px; } .expandable-nav .expanded-nav.right { right: -15px; } .expandable-nav .expanded-nav.right:before { right: 14px; } .expandable-nav .expanded-nav.right:after { right: 15px; } .expandable-nav .expanded-nav:before, .expandable-nav .expanded-nav:after { content: ''; display: block; position: absolute; top: -14px; } .expandable-nav .expanded-nav:before { border-left: 9px solid transparent; border-top: 9px solid transparent; border-bottom: 9px solid transparent; border-right: 9px solid transparent; border-bottom: 9px solid #EEE; top: -16px; } .expandable-nav .expanded-nav:after { border-left: 8px solid transparent; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid #fff; } .expandable-nav .expanded-nav ul { line-height: normal; } .expandable-nav .expanded-nav li, .expandable-nav .expanded-nav li a, .expandable-nav .expanded-nav li button { display: block; } .expandable-nav .expanded-nav li button { min-width: 100%; } .expandable-nav .expanded-nav li a, .expandable-nav .expanded-nav li button { white-space: nowrap; padding: 7px 0; } .expandable-nav .expanded-nav li.separator + li, .expandable-nav .expanded-nav li.separator-after + li, .expandable-nav .expanded-nav li.separator-before { border-top: 1px solid #EEE; margin-top: 5px; padding-top: 5px; } .expandable-nav.open .expanded-nav { filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; -webkit-opacity: 1; -khtml-opacity: 1; -moz-opacity: 1; -ms-opacity: 1; -o-opacity: 1; opacity: 1; } @charset "UTF-8"; /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ /* ------------------------------------------------------------- Mixins meant to replace the use of z-index completely. These allow developers to focus on the intent of positioning as named layers. Each of these mixins accepts an $adjust value, which is there to allow you to prioritize multiple elements in the same layer. Mixins available: - layer-background Arguments: [$adjust] Adds approprite z-index value for elements that are meant to be below the page's main content - layer-midground Arguments: [$adjust] Adds appropriate z-index value for elements that are the page's primary content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that are meant to be priminent / above the main content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that should appear above everything else (IE - modals) ------------------------------------------------------------- */ /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ .face { height: 40px; width: 40px; position: relative; display: inline-block; border-radius: 50%; overflow: hidden; } .face .bg-image { border-radius: 50%; } .face .preload-image { vertical-align: middle; } .face .fill { pointer-events: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; } .face .fill span { position: absolute; top: 50%; left: 50%; -webkit-transform: translateY(-50%) translateX(-50%); -khtml-transform: translateY(-50%) translateX(-50%); -moz-transform: translateY(-50%) translateX(-50%); -ms-transform: translateY(-50%) translateX(-50%); -o-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); color: #fff; font-weight: bold; font-size: 1em; text-transform: uppercase; } @charset "UTF-8"; /* ------------------------------------------------------------- Mixins meant to replace the use of z-index completely. These allow developers to focus on the intent of positioning as named layers. Each of these mixins accepts an $adjust value, which is there to allow you to prioritize multiple elements in the same layer. Mixins available: - layer-background Arguments: [$adjust] Adds approprite z-index value for elements that are meant to be below the page's main content - layer-midground Arguments: [$adjust] Adds appropriate z-index value for elements that are the page's primary content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that are meant to be priminent / above the main content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that should appear above everything else (IE - modals) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ .dialog.feedback .dialog-head:before { font-family: "fontIcons"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; text-transform: none; } /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ .dialog.feedback { width: 500px; height: 100%; max-height: 560px; } body.mobile .dialog.feedback { width: 320px; } .dialog.feedback .dialog-head:before { content: "\E054"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; } .dialog.feedback .dialog-content { padding: 0; height: calc(100% - 60px); position: relative; } .dialog.feedback.iOS .dialog-content { -webkit-overflow-scrolling: touch; overflow-y: scroll; } .dialog.feedback .voc-frame { height: 100%; width: 100%; border: none; } @charset "UTF-8"; /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ /* ------------------------------------------------------------- Mixins meant to replace the use of z-index completely. These allow developers to focus on the intent of positioning as named layers. Each of these mixins accepts an $adjust value, which is there to allow you to prioritize multiple elements in the same layer. Mixins available: - layer-background Arguments: [$adjust] Adds approprite z-index value for elements that are meant to be below the page's main content - layer-midground Arguments: [$adjust] Adds appropriate z-index value for elements that are the page's primary content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that are meant to be priminent / above the main content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that should appear above everything else (IE - modals) ------------------------------------------------------------- */ .add-button.expandable-nav .upload-link:before, .add-button.expandable-nav .upload-folder-link:before, .add-button.expandable-nav .create-album-link:before, .add-button.expandable-nav .create-amazon-drive-album:before { font-family: "fontIcons"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; text-transform: none; } /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ .add-button.expandable-nav .expanded-nav { padding: 0; } .add-button.expandable-nav .expanded-nav li { padding: 0 13px; } .add-button.expandable-nav .expanded-nav li:not(:first-child) { border-top: 1px solid #EEE; } .add-button.expandable-nav .expanded-nav li button, .add-button.expandable-nav .expanded-nav li a { position: relative; padding-left: 28px; margin: 10px 0; } .add-button.expandable-nav .expanded-nav li button:before, .add-button.expandable-nav .expanded-nav li a:before { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -khtml-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); left: 0; width: 16px; text-align: center; } .add-button.expandable-nav .expanded-nav li.desktop-app { background-color: rgba(187, 193, 208, 0.15); height: 40px; min-width: 178px; text-align: center; } .add-button.expandable-nav .expanded-nav li.desktop-app a { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -khtml-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); font-size: 11px; margin: 0; padding: 0; position: relative; white-space: normal; } .add-button.expandable-nav .expanded-nav li.desktop-app .highlight { color: #3d7eda; font-weight: bold; white-space: nowrap; } .add-button.expandable-nav .upload-link:before { content: "\E064"; font-size: 12px; line-height: 12px; vertical-align: middle; display: inline-block; color: #3a88f5; } .add-button.expandable-nav .upload-folder-link:before { content: "\E063"; font-size: 14px; line-height: 14px; vertical-align: middle; display: inline-block; color: #3a88f5; } .add-button.expandable-nav .create-album-link:before { content: "\E003"; font-size: 16px; line-height: 16px; vertical-align: middle; display: inline-block; color: #957BFF; } .add-button.expandable-nav .create-amazon-drive-album:before { content: "\E05A"; font-size: 13px; line-height: 13px; vertical-align: middle; display: inline-block; color: #7985a3; } .add-button.expandable-nav span.label { display: block; font-weight: 900; } .add-button.expandable-nav span.label + span { font-size: 0.7em; color: #999; } @charset "UTF-8"; /* ------------------------------------------------------------- Mixins meant to replace the use of z-index completely. These allow developers to focus on the intent of positioning as named layers. Each of these mixins accepts an $adjust value, which is there to allow you to prioritize multiple elements in the same layer. Mixins available: - layer-background Arguments: [$adjust] Adds approprite z-index value for elements that are meant to be below the page's main content - layer-midground Arguments: [$adjust] Adds appropriate z-index value for elements that are the page's primary content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that are meant to be priminent / above the main content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that should appear above everything else (IE - modals) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ .simple-progress-dialog .progress { border-radius: 0 0 8px 8px; } .simple-progress-dialog .progress span { border-radius: 0 0 8px 8px; } @charset "UTF-8"; /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ /* ------------------------------------------------------------- Mixins meant to replace the use of z-index completely. These allow developers to focus on the intent of positioning as named layers. Each of these mixins accepts an $adjust value, which is there to allow you to prioritize multiple elements in the same layer. Mixins available: - layer-background Arguments: [$adjust] Adds approprite z-index value for elements that are meant to be below the page's main content - layer-midground Arguments: [$adjust] Adds appropriate z-index value for elements that are the page's primary content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that are meant to be priminent / above the main content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that should appear above everything else (IE - modals) ------------------------------------------------------------- */ /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ .conflict-manager-dialog .conflict-details { padding-bottom: 15px; } .conflict-manager-dialog .conflict-details:first-child { border-bottom: 1px solid #cdd2db; margin-bottom: 15px; } .conflict-manager-dialog .conflict-details p { font-size: 1.2em; } .conflict-manager-dialog .conflict-details h4 { font-size: 1.1em; } .conflict-manager-dialog .conflict-details .conflict-detail { font-size: 0.9em; } .conflict-manager-dialog .button-container { text-align: center; } .conflict-manager-dialog .button-container .apply-to-all-checkbox { padding-top: 15px; display: block; } .prints-product-selector { width: 853px; } .prints-product-selector .dialog-content { height: 328px; display: flex; padding: 0; color: #333; } .prints-product-selector .dialog-content .product-information { background-color: #e6e6e6; height: 100%; color: inherit; display: flex; align-items: center; } .prints-product-selector .dialog-content .product-information-content { padding: 15px; flex: 1 100%; text-align: left; } .prints-product-selector .dialog-content .product-information-content-title { text-align: left; font-size: 19px; color: inherit; } .prints-product-selector .dialog-content .product-information-content-description { color: inherit; } .prints-product-selector .dialog-content .product-information-content-bullets { list-style: initial; margin-left: 15px; } .prints-product-selector .dialog-content .product-information-content-bullets li { list-style: initial; display: list-item; } .prints-product-selector .dialog-content .product-information-image { flex: 1 100%; padding: 15px; } .prints-product-selector .dialog-content .product-information-image img { box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.3); } .prints-product-selector .dialog-content .product-selector { width: 244px; text-align: left; } .prints-product-selector .dialog-content .product-selector-button { background-color: transparent; border: solid 1px #dee1ea; color: #ffffff; padding: 4px 10px; font-size: 15px; } .prints-product-selector .dialog-content .product-selector-chooser { font-size: 15px; padding: 15px 26px; } .prints-product-selector .dialog-content .product-selector-chooser-section { margin-top: 15px; } .prints-product-selector .dialog-content .product-selector-chooser-base-price-title, .prints-product-selector .dialog-content .product-selector-chooser-size-title, .prints-product-selector .dialog-content .product-selector-chooser-cover-title { margin-right: 5px; color: #777; font-size: 15px; } .prints-product-selector .dialog-content .product-selector-chooser-base-price-value { font-size: 18px; color: #b12704; } .prints-product-selector .dialog-content .product-selector-chooser-size-value, .prints-product-selector .dialog-content .product-selector-chooser-cover-value { font-size: 13px; font-weight: bold; } .prints-product-selector .dialog-content .product-selector-chooser .button-toggle { margin-top: 5px; border: none; border-radius: 0; } .prints-product-selector .dialog-content .product-selector-chooser .button-toggle-item { margin-right: 6px; border: 1px solid #cecece; background: #ffffff; font-size: 13px; width: auto; white-space: nowrap; } .prints-product-selector .dialog-content .product-selector-chooser .button-toggle-item button { color: #dee1ea; border: none; padding: 6px 12px; } .prints-product-selector .dialog-content .product-selector-chooser .button-toggle-item.active { border: 1px solid #e77600; background-color: #fef8f2; } .prints-product-selector .dialog-content .product-selector-chooser .button-toggle-item.active button { color: #232323; } .prints-product-selector .dialog-content .product-selector-chooser-button { margin-top: 15px; } .prints-product-selector .dialog-content .product-selector-chooser-button button { background-image: linear-gradient(0deg, #f1c241 1%, #f4cd63 41%, #f8df9d 99%); border-radius: 3px; color: inherit; padding: 7.5px 30px; } .button-toggle { border: solid 1px #e3e5ec; border-radius: 5px; display: inline-flex; overflow: hidden; } .button-toggle-item { width: 200px; } .button-toggle-item.active { background-color: #fd8273; } .button-toggle-item.active button { color: #fff; } .button-toggle-item button { width: 100%; height: 100%; padding: 10px 45px; color: #c5cbd7; } .button-toggle-item button:hover { cursor: pointer; } @charset "UTF-8"; /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ .columns { white-space: nowrap; } .columns .column { white-space: normal; display: inline-block; vertical-align: top; position: relative; } .columns .column-size { display: inline-block; } .columns.flexbox { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } .columns.flexbox .column.no-group { -webkit-box-flex: 1 1 auto; -khtml-box-flex: 1 1 auto; -moz-box-flex: 1 1 auto; -ms-box-flex: 1 1 auto; -o-box-flex: 1 1 auto; box-flex: 1 1 auto; flex: 1 1 auto; } .unauth-dialog .dialog-content { text-align: center; } .unauth-dialog .button { width: 50%; } @charset "UTF-8"; /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ .toast .icon.icon-spinner { background: center center no-repeat; background-size: cover; background-image: url(data:image/png;base64,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); } /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ .toast .icon.icon-spinner, .toast { -webkit-animation: none 333ms linear infinite; -khtml-animation: none 333ms linear infinite; -moz-animation: none 333ms linear infinite; -ms-animation: none 333ms linear infinite; -o-animation: none 333ms linear infinite; animation: none 333ms linear infinite; } .toast .icon.icon-spinner { -webkit-animation-name: spin; -khtml-animation-name: spin; -moz-animation-name: spin; -ms-animation-name: spin; -o-animation-name: spin; animation-name: spin; -webkit-animation-duration: 1000ms; -khtml-animation-duration: 1000ms; -moz-animation-duration: 1000ms; -ms-animation-duration: 1000ms; -o-animation-duration: 1000ms; animation-duration: 1000ms; -webkit-animation-timing-function: linear; -khtml-animation-timing-function: linear; -moz-animation-timing-function: linear; -ms-animation-timing-function: linear; -o-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -khtml-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-iteration-count: infinite; } .toast { -webkit-animation-name: pop-up-from-below; -khtml-animation-name: pop-up-from-below; -moz-animation-name: pop-up-from-below; -ms-animation-name: pop-up-from-below; -o-animation-name: pop-up-from-below; animation-name: pop-up-from-below; -webkit-animation-duration: 500ms; -khtml-animation-duration: 500ms; -moz-animation-duration: 500ms; -ms-animation-duration: 500ms; -o-animation-duration: 500ms; animation-duration: 500ms; -webkit-animation-timing-function: ease; -khtml-animation-timing-function: ease; -moz-animation-timing-function: ease; -ms-animation-timing-function: ease; -o-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-iteration-count: 1; -khtml-animation-iteration-count: 1; -moz-animation-iteration-count: 1; -ms-animation-iteration-count: 1; -o-animation-iteration-count: 1; animation-iteration-count: 1; } /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ /* ------------------------------------------------------------- Mixins meant to replace the use of z-index completely. These allow developers to focus on the intent of positioning as named layers. Each of these mixins accepts an $adjust value, which is there to allow you to prioritize multiple elements in the same layer. Mixins available: - layer-background Arguments: [$adjust] Adds approprite z-index value for elements that are meant to be below the page's main content - layer-midground Arguments: [$adjust] Adds appropriate z-index value for elements that are the page's primary content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that are meant to be priminent / above the main content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that should appear above everything else (IE - modals) ------------------------------------------------------------- */ .toast.minimized .minimize-button:before, .toast .close-button:before, .toast .minimize-button:before, .toast .column.secondary-action button.addToFamily:before { font-family: "fontIcons"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; text-transform: none; } /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ .toast-container { position: fixed; bottom: 25px; left: 25px; width: 440px; z-index: 302; } @media screen and (max-width: 700px) { .toast-container { bottom: 0; left: 0; width: 100%; } } .toast { position: relative; border-radius: 5px; max-height: 0; overflow: hidden; filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-opacity: 0; -khtml-opacity: 0; -moz-opacity: 0; -ms-opacity: 0; -o-opacity: 0; opacity: 0; -webkit-box-shadow: 0 3px 10px rgba(5, 5, 5, 0.3); -khtml-box-shadow: 0 3px 10px rgba(5, 5, 5, 0.3); -moz-box-shadow: 0 3px 10px rgba(5, 5, 5, 0.3); -ms-box-shadow: 0 3px 10px rgba(5, 5, 5, 0.3); -o-box-shadow: 0 3px 10px rgba(5, 5, 5, 0.3); box-shadow: 0 3px 10px rgba(5, 5, 5, 0.3); -webkit-transform: translateY(100%); -khtml-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); -webkit-transition: transform 333ms ease, opacity 333ms ease, max-height 333ms ease; -khtml-transition: transform 333ms ease, opacity 333ms ease, max-height 333ms ease; -moz-transition: transform 333ms ease, opacity 333ms ease, max-height 333ms ease; -ms-transition: transform 333ms ease, opacity 333ms ease, max-height 333ms ease; -o-transition: transform 333ms ease, opacity 333ms ease, max-height 333ms ease; transition: transform 333ms ease, opacity 333ms ease, max-height 333ms ease; } .toast + .toast { margin-top: 5px; } .toast.visible { -webkit-transform: translateY(0); -khtml-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; -webkit-opacity: 1; -khtml-opacity: 1; -moz-opacity: 1; -ms-opacity: 1; -o-opacity: 1; opacity: 1; max-height: 150px; } .toast.visible.has-content { max-height: 250px; } .toast.minimized .toast-additional-content { max-height: 0px; } .toast.minimized .minimize-button:before { content: "\E011"; font-size: 10px; line-height: 10px; vertical-align: middle; display: inline-block; height: inherit; line-height: inherit; opacity: 0.5; } .toast .toast-inner { display: flex; background: #3d7eda; color: #fff; padding: 15px; } .toast .toast-additional-content { -webkit-transition: max-height 333ms ease; -khtml-transition: max-height 333ms ease; -moz-transition: max-height 333ms ease; -ms-transition: max-height 333ms ease; -o-transition: max-height 333ms ease; transition: max-height 333ms ease; background-color: #fff; max-height: 200px; } .toast .toast-additional-content .additional-error-content { padding: 15px; } .toast .toast-additional-content .additional-error-content a { color: #3d7eda !important; margin: 0; } .toast .close-button { color: #fff; height: 20px; line-height: 20px; } .toast .close-button:before { content: "\E070"; font-size: 14px; line-height: 14px; vertical-align: middle; display: inline-block; height: inherit; line-height: inherit; } .toast .minimize-button { color: #fff; height: 20px; line-height: 20px; } .toast .minimize-button:before { content: "\E00E"; font-size: 10px; line-height: 10px; vertical-align: middle; display: inline-block; height: inherit; line-height: inherit; opacity: 0.5; } .toast a, .toast button { margin-left: 10px; color: inherit !important; white-space: nowrap; } .toast .column { vertical-align: middle; flex-shrink: 1; } .toast .column.message { width: 0; flex-grow: 1; line-height: 20px; font-weight: bold; } .toast .column.secondary-action button.addToFamily { opacity: 1; color: #fff; height: 20px; line-height: 20px; } .toast .column.secondary-action button.addToFamily:before { content: "\E023"; font-size: 14px; line-height: 14px; vertical-align: middle; display: inline-block; height: inherit; line-height: inherit; } .toast .column.secondary-action button.addToFamily.on { cursor: default; color: #FECB88 !important; filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; -webkit-opacity: 1; -khtml-opacity: 1; -moz-opacity: 1; -ms-opacity: 1; -o-opacity: 1; opacity: 1; } .toast .column.action { line-height: 20px; } .toast .column.action a, .toast .column.action button { opacity: 0.7; } .toast .column.action a:hover, .toast .column.action button:hover { opacity: 1; } .toast.ellipsis .message { overflow: hidden; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .toast.fail .toast-inner, .toast.error .toast-inner { background: #f78595; } .toast.fail .message a, .toast.error .message a { color: #3d7eda !important; } .toast .icon { margin-right: 10px; width: 20px; height: 20px; text-align: center; display: inline-block; vertical-align: middle; position: relative; } .toast .icon:before { font-size: 15px; line-height: 20px; } .toast .icon.icon-checkmark:before { font-size: 20px; } .toast .icon.icon-spinner { width: 20px; height: 20px; overflow: hidden; vertical-align: middle; display: inline-block; } .toast .progress { height: 5px; display: block; position: relative; background: #F6F7FD; } .toast .progress span { display: block; height: 5px; background: #ff9900; -webkit-transition: width 500ms ease; -khtml-transition: width 500ms ease; -moz-transition: width 500ms ease; -ms-transition: width 500ms ease; -o-transition: width 500ms ease; transition: width 500ms ease; } @charset "UTF-8"; /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ #tutorial-container .button.skip { display: inline-block; padding: 0 15px; height: 2.5em; line-height: 2.5em; border-radius: 4px; text-align: center; border: none; font-family: inherit; font-size: inherit; font-weight: bold; letter-spacing: 0.4px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #tutorial-container .button.skip:disabled, #tutorial-container .disabled.button.skip { cursor: default; } #tutorial-container .button.skip + a, #tutorial-container .button.skip + button { margin-left: 15px; } #tutorial-container .button.skip { background: none; color: inherit; } #tutorial-container .button.skip:enabled:hover, #tutorial-container .button.skip:enabled:focus, #tutorial-container .button.skip:enabled:active, #tutorial-container .button.skip:enabled.active { color: inherit; background: none; } /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ /* ------------------------------------------------------------- Mixins meant to replace the use of z-index completely. These allow developers to focus on the intent of positioning as named layers. Each of these mixins accepts an $adjust value, which is there to allow you to prioritize multiple elements in the same layer. Mixins available: - layer-background Arguments: [$adjust] Adds approprite z-index value for elements that are meant to be below the page's main content - layer-midground Arguments: [$adjust] Adds appropriate z-index value for elements that are the page's primary content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that are meant to be priminent / above the main content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that should appear above everything else (IE - modals) ------------------------------------------------------------- */ /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ #tutorial-container { position: absolute; } #tutorial-container h4 { font-weight: bold; color: #fff; margin: 15px; font-size: 16px; } #tutorial-container p { color: #fff; margin: 15px; font-size: 16px; } #tutorial-container .mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 300; } #tutorial-container .container { margin-top: 45px; background-color: #49a3c6; position: absolute; width: 300px; height: 220px; line-height: 25px; text-align: left; box-shadow: 0px 2px 9px 0px rgba(5, 5, 5, 0.15); z-index: 301; } #tutorial-container .container:before { content: ''; position: absolute; left: 50%; -webkit-transform: translateX(-50%); -khtml-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); border-left: 7.5px solid transparent; border-top: 7.5px solid transparent; border-bottom: 7.5px solid transparent; border-right: 7.5px solid transparent; border-bottom: 7.5px solid #49a3c6; top: -14px; } #tutorial-container .container:after { content: ''; border-radius: 50%; background: #49a3c6; width: 23px; height: 23px; top: -41px; position: absolute; left: 50%; -webkit-transform: translateX(-50%); -khtml-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); border: 3px solid #fff; box-shadow: 0 0 0 3px rgba(73, 163, 198, 0.5); } #tutorial-container .container .progress-dots { bottom: 5px; } #tutorial-container .container .progress-dots .dot.active { background-color: #fff; } #tutorial-container .button { margin: 15px; margin-left: 0px; } #tutorial-container .button.skip { color: #fff !important; opacity: 0.9; } #tutorial-container .button.next { float: right; background: #fff; color: #49a3c6; } @charset "UTF-8"; /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ #photo-editor .screen .loading { -webkit-animation: none 333ms linear infinite; -khtml-animation: none 333ms linear infinite; -moz-animation: none 333ms linear infinite; -ms-animation: none 333ms linear infinite; -o-animation: none 333ms linear infinite; animation: none 333ms linear infinite; } #photo-editor .screen .loading { -webkit-animation-name: spin; -khtml-animation-name: spin; -moz-animation-name: spin; -ms-animation-name: spin; -o-animation-name: spin; animation-name: spin; -webkit-animation-duration: 1000ms; -khtml-animation-duration: 1000ms; -moz-animation-duration: 1000ms; -ms-animation-duration: 1000ms; -o-animation-duration: 1000ms; animation-duration: 1000ms; -webkit-animation-timing-function: linear; -khtml-animation-timing-function: linear; -moz-animation-timing-function: linear; -ms-animation-timing-function: linear; -o-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -khtml-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-iteration-count: infinite; } #photo-editor .screen .loading { background: center center no-repeat; background-size: cover; background-image: url(data:image/png;base64,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); } /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ #photo-editor .screen .loading { -webkit-animation: none 333ms linear infinite; -khtml-animation: none 333ms linear infinite; -moz-animation: none 333ms linear infinite; -ms-animation: none 333ms linear infinite; -o-animation: none 333ms linear infinite; animation: none 333ms linear infinite; } /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ #photo-editor .screen .loading { background: center center no-repeat; background-size: cover; background-image: url(data:image/png;base64,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); } /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ #photo-editor .screen .loading { -webkit-animation: none 333ms linear infinite; -khtml-animation: none 333ms linear infinite; -moz-animation: none 333ms linear infinite; -ms-animation: none 333ms linear infinite; -o-animation: none 333ms linear infinite; animation: none 333ms linear infinite; } #photo-editor .screen .loading { -webkit-animation-name: spin; -khtml-animation-name: spin; -moz-animation-name: spin; -ms-animation-name: spin; -o-animation-name: spin; animation-name: spin; -webkit-animation-duration: 1000ms; -khtml-animation-duration: 1000ms; -moz-animation-duration: 1000ms; -ms-animation-duration: 1000ms; -o-animation-duration: 1000ms; animation-duration: 1000ms; -webkit-animation-timing-function: linear; -khtml-animation-timing-function: linear; -moz-animation-timing-function: linear; -ms-animation-timing-function: linear; -o-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -khtml-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-iteration-count: infinite; } /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ /* ------------------------------------------------------------- Mixins meant to replace the use of z-index completely. These allow developers to focus on the intent of positioning as named layers. Each of these mixins accepts an $adjust value, which is there to allow you to prioritize multiple elements in the same layer. Mixins available: - layer-background Arguments: [$adjust] Adds approprite z-index value for elements that are meant to be below the page's main content - layer-midground Arguments: [$adjust] Adds appropriate z-index value for elements that are the page's primary content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that are meant to be priminent / above the main content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that should appear above everything else (IE - modals) ------------------------------------------------------------- */ #photo-editor .close-imgly:before { font-family: "fontIcons"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; text-transform: none; } /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ /*! * Copyright (c) 2013-2015 9elements GmbH * * Released under Attribution-NonCommercial 3.0 Unported * http://creativecommons.org/licenses/by-nc/3.0/ * * For commercial use, please contact us at contact@9elements.com */ .imglykit { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); position: absolute; width: 100%; height: 100%; background: #1e1e1e; overflow: hidden; text-align: left; } .imglykit div, .imglykit span, .imglykit applet, .imglykit object, .imglykit iframe, .imglykit h1, .imglykit h2, .imglykit h3, .imglykit h4, .imglykit h5, .imglykit h6, .imglykit p, .imglykit blockquote, .imglykit pre, .imglykit a, .imglykit abbr, .imglykit acronym, .imglykit address, .imglykit big, .imglykit cite, .imglykit code, .imglykit del, .imglykit dfn, .imglykit em, .imglykit img, .imglykit ins, .imglykit kbd, .imglykit q, .imglykit s, .imglykit samp, .imglykit small, .imglykit strike, .imglykit strong, .imglykit sub, .imglykit sup, .imglykit tt, .imglykit var, .imglykit b, .imglykit u, .imglykit i, .imglykit center, .imglykit dl, .imglykit dt, .imglykit dd, .imglykit ol, .imglykit ul, .imglykit li, .imglykit fieldset, .imglykit form, .imglykit label, .imglykit legend, .imglykit table, .imglykit caption, .imglykit tbody, .imglykit tfoot, .imglykit thead, .imglykit tr, .imglykit th, .imglykit td, .imglykit article, .imglykit aside, .imglykit canvas, .imglykit details, .imglykit embed, .imglykit figure, .imglykit figcaption, .imglykit footer, .imglykit header, .imglykit hgroup, .imglykit menu, .imglykit nav, .imglykit output, .imglykit ruby, .imglykit section, .imglykit summary, .imglykit time, .imglykit mark, .imglykit audio, .imglykit video { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline; } .imglykit table { border-collapse: collapse; border-spacing: 0; } .imglykit caption, .imglykit th, .imglykit td { text-align: left; font-weight: normal; vertical-align: middle; } .imglykit q, .imglykit blockquote { quotes: none; } .imglykit q:before, .imglykit q:after, .imglykit blockquote:before, .imglykit blockquote:after { content: ""; content: none; } .imglykit a img { border: 0; } .imglykit * { box-sizing: border-box; } .imglykit-float-left { float: left; } .imglykit-float-right { float: right; } .imglykit-container { position: absolute; top: 0; left: 0; display: table; width: 100%; height: 100%; table-layout: fixed; } .imglykit-container .imglykit-canvas-container-row { display: table-row; } .imglykit-container .imglykit-canvas-container { position: relative; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; display: table-cell; overflow: hidden; } .imglykit-container .imglykit-canvas-inner-container { position: absolute; } .imglykit-container .imglykit-canvas-inner-container canvas { cursor: move; } .imglykit-container .imglykit-canvas-inner-container .imglykit-canvas-controls { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .imglykit-container .imglykit-canvas-inner-container .imglykit-canvas-controls.imglykit-canvas-controls-disabled { display: none; } .imglykit-webcam-video { width: 100px; height: 100px; } .imglykit-webcam-button { -webkit-border-radius: 26.5px; -moz-border-radius: 26.5px; -ms-border-radius: 26.5px; -o-border-radius: 26.5px; border-radius: 26.5px; margin: 15px auto 0 !important; width: 110px; height: 53px; padding-top: 7px !important; background: #43adeb; cursor: pointer; } .imglykit-webcam-button img { margin: auto; width: 39px !important; height: 39px !important; } .imglykit-container .imglykit-splash-container { display: table; width: 100%; height: 100%; padding: 30px; table-layout: fixed; } .imglykit-container .imglykit-splash-container.imglykit-header-padding { padding-top: 100px; } .imglykit-container .imglykit-splash-container .imglykit-splash-cell { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; display: table-cell; } .imglykit-container .imglykit-splash-container .imglykit-splash-button { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; display: inline-block; margin-bottom: 10px; padding: 0 15px; background: #43adeb; font-family: Helvetica,Arial,sans-serif; font-size: 18px; line-height: 38px; font-weight: bold; color: white; } .imglykit-container .imglykit-splash-container .imglykit-splash-or { display: table; table-layout: fixed; width: 100%; height: 30px; } .imglykit-container .imglykit-splash-container .imglykit-splash-or-line { position: relative; display: table-cell; } .imglykit-container .imglykit-splash-container .imglykit-splash-or-line:before { position: absolute; top: 50%; left: 0; display: block; border-top: 1px solid rgba(255, 255, 255, 0.2); width: 100%; height: 1px; content: ''; } .imglykit-container .imglykit-splash-container .imglykit-splash-or-word { display: table-cell; vertical-align: middle; width: 30px; font-family: Helvetica,Arial,sans-serif; font-size: 12px; color: rgba(255, 255, 255, 0.2); } .imglykit-container .imglykit-splash-container .imglykit-splash-row, .imglykit-container .imglykit-splash-container .imglykit-splash-cell { width: 100%; text-align: center; vertical-align: middle; } .imglykit-container .imglykit-splash-container .imglykit-splash-row .imglykit-splash-cell, .imglykit-container .imglykit-splash-container .imglykit-splash-cell .imglykit-splash-cell { padding: 10px; } .imglykit-container .imglykit-splash-container .imglykit-splash-row { display: table-row; cursor: pointer; } .imglykit-container .imglykit-splash-container .imglykit-splash-row--upload, .imglykit-container .imglykit-splash-container .imglykit-splash-row--camera { height: 45%; } .imglykit-container .imglykit-splash-container .imglykit-splash-row .imglykit-splash-content { margin: auto; margin-top: 10px; width: 250px; font-family: Helvetica,Arial,Verdana; } .imglykit-container .imglykit-splash-container .imglykit-splash-row .imglykit-splash-content h1 { margin-bottom: 5px; font-size: 20px; font-weight: bold; color: white; } .imglykit-container .imglykit-splash-container .imglykit-splash-row .imglykit-splash-content .imglykit-splash-text { font-size: 14px; color: rgba(255, 255, 255, 0.2); } .imglykit-container .imglykit-splash-container .imglykit-splash-row .imglykit-upload-hidden-input { position: absolute; top: 0; left: 0; visibility: hidden; width: 0; height: 0; } .imglykit-container .imglykit-header-row { display: table-row; height: 30px; } .imglykit-container .imglykit-header { display: table-cell; background: #1a1a1a; text-align: center; color: white; font: bold 11px Helvetica,Arial,sans-serif; line-height: 30px; position: absolute; top: 0; left: 0; width: 100%; height: 30px; z-index: 2; } .imglykit-container .imglykit-header .imglykit-close-button { position: absolute; top: 0; right: 0; cursor: pointer; margin-right: 10px; } .imglykit-container .imglykit-header .imglykit-close-button img { vertical-align: middle; } .imglykit-container .imglykit-top-controls-row { display: table-row; } .imglykit-container .imglykit-top-controls { -webkit-user-select: none; -moz-user-select: none; user-select: none; display: table-cell; width: 100%; height: 40px; color: white; font-family: Helvetica,Arial,sans-serif; font-size: 16px; padding: 0 20px; z-index: 2; background: #2b2b2b; } .imglykit-container .imglykit-top-controls > * * { display: inline-block; } .imglykit-container .imglykit-top-controls, .imglykit-container .imglykit-top-controls * { line-height: 30px; } .imglykit-container .imglykit-top-controls.imglykit-header-padding { top: 30px; } .imglykit-container .imglykit-top-controls-left, .imglykit-container .imglykit-top-controls-right { padding-top: 5px; } .imglykit-container .imglykit-top-controls-left { float: left; } .imglykit-container .imglykit-top-controls-right { float: right; display: none; } .imglykit-container .imglykit-top-controls-right .imglykit-zoom-in, .imglykit-container .imglykit-top-controls-right .imglykit-zoom-out { padding: 0 15px; cursor: pointer; border-left: 1px solid #363636; } .imglykit-container .imglykit-top-controls-right .imglykit-zoom-in img, .imglykit-container .imglykit-top-controls-right .imglykit-zoom-out img { filter: alpha(opacity=40); opacity: .4; vertical-align: middle; } .imglykit-container .imglykit-top-controls-right .imglykit-zoom-in:hover img, .imglykit-container .imglykit-top-controls-right .imglykit-zoom-out:hover img { filter: alpha(opacity=100); opacity: 1; } .imglykit-container .imglykit-top-controls-right .imglykit-zoom-out { padding-right: 0; } .imglykit-container .imglykit-top-controls-right .imglykit-zoom-level { filter: alpha(opacity=40); opacity: .4; padding: 0 10px; } .imglykit-container .imglykit-undo { cursor: pointer; border-right: 1px solid #363636; color: rgba(255, 255, 255, 0.4); padding: 0 10px; display: none; } .imglykit-container .imglykit-undo img { filter: alpha(opacity=40); opacity: .4; margin-right: 5px; vertical-align: middle; } .imglykit-container .imglykit-export { cursor: pointer; border-right: 1px solid #363636; color: rgba(255, 255, 255, 0.4); padding: 0 10px; display: none; } .imglykit-container .imglykit-export img { filter: alpha(opacity=40); opacity: .4; margin-right: 5px; vertical-align: middle; } .imglykit-container .imglykit-new { cursor: pointer; border-right: 1px solid #363636; color: rgba(255, 255, 255, 0.4); padding-right: 10px; } .imglykit-container .imglykit-new img { margin-right: 5px; vertical-align: middle; } .imglykit-container .imglykit-knob { -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; position: absolute; background: white; width: 20px; height: 20px; border: 2px solid rgba(0, 0, 0, 0.3); cursor: pointer; } .imglykit-container .imglykit-crosshair { width: 34px; height: 34px; cursor: pointer; float: left; } .imglykit-container .imglykit-transparent-knob { -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; -webkit-box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5); -moz-box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5); position: absolute; width: 20px; height: 20px; border: 2px solid rgba(0, 0, 0, 0.5); margin-top: -10px; margin-left: -10px; cursor: pointer; } .imglykit .imglykit-loadingOverlay { position: absolute; z-index: 3; top: 0; left: 0; display: none; width: 100%; height: 100%; background: rgba(30, 30, 30, 0.9); } .imglykit .imglykit-loadingOverlay-content { position: absolute; top: 50%; left: 50%; margin-top: -40px; margin-left: -75px; border-radius: 5px; width: 150px; height: 70px; padding: 10px; background: #1e1e1e; } .imglykit .imglykit-loadingOverlay-content img { display: block; margin: auto; margin-bottom: 10px; } .imglykit .imglykit-loadingOverlay-content span { display: block; font: bold 11px Helvetica,Arial,sans-serif; text-align: center; color: white; } .imglykit .imglykit-flashOverlay { -webkit-box-shadow: 0 2px rgba(255, 255, 255, 0.5) inset; -moz-box-shadow: 0 2px rgba(255, 255, 255, 0.5) inset; box-shadow: 0 2px rgba(255, 255, 255, 0.5) inset; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); position: absolute; z-index: 3; top: 50%; left: 50%; display: none; border-radius: 5px; max-width: 90%; padding: 20px; background: rgba(43, 43, 43, 0.9); } .imglykit .imglykit-flashOverlay-headline, .imglykit .imglykit-flashOverlay-text { display: block; font: bold 15px Helvetica,Arial,sans-serif; text-align: center; color: white; } .imglykit .imglykit-flashOverlay-headline { margin-bottom: .5em; } .imglykit .imglykit-flashOverlay-close { position: absolute; top: 10px; right: 10px; cursor: pointer; } .imglykit .imglykit-flashOverlay-text { font: normal 13px Helvetica,Arial,sans-serif; } .imglykit .imglykit-flashOverlay--error { -webkit-box-shadow: 0 2px #ff3e3e inset; -moz-box-shadow: 0 2px #ff3e3e inset; box-shadow: 0 2px #ff3e3e inset; } .imglykit .imglykit-flashOverlay--warning { -webkit-box-shadow: 0 2px #ffbf3e inset; -moz-box-shadow: 0 2px #ffbf3e inset; box-shadow: 0 2px #ffbf3e inset; } .imglykit-container .imglykit-controls-row { display: table-row; } .imglykit-container .imglykit-controls-container { -webkit-user-select: none; -moz-user-select: none; user-select: none; display: table-cell; width: 100%; height: 80px; background: #2b2b2b; } .imglykit-container .imglykit-controls { width: 100%; text-align: center; height: 80px; } .imglykit-container .imglykit-controls > div:not(.imglykit-scrollbar-background) > * { width: 100%; display: table; table-layout: fixed; } .imglykit-container .imglykit-controls > div:not(.imglykit-scrollbar-background) > * > * { display: table-cell; vertical-align: top; } .imglykit-container .imglykit-controls .imglykit-controls-list-container { overflow: hidden; height: 80px; } .imglykit-container .imglykit-controls .imglykit-controls-list { position: absolute; width: 100%; overflow: hidden; overflow-x: auto; text-align: center; white-space: nowrap; height: 80px; font-size: 0; } .imglykit-container .imglykit-controls .imglykit-controls-list-overflow { overflow: visible; } .imglykit-container .imglykit-controls li { -webkit-transition: background-color .2s ease-out; -moz-transition: background-color .2s ease-out false; -o-transition: background-color .2s ease-out false; transition: background-color .2s ease-out; display: inline-block; vertical-align: top; position: relative; width: 80px; height: 80px; cursor: pointer; line-height: 80px; border-left: 1px solid #363636; } .imglykit-container .imglykit-controls li:last-child { border-right: 1px solid #363636; } .imglykit-container .imglykit-controls li.imglykit-controls-item--with-label:hover img { margin-bottom: 20px; } .imglykit-container .imglykit-controls li img { -webkit-transition: all .2s ease-out; -moz-transition: all .2s ease-out false; -o-transition: all .2s ease-out false; transition: all .2s ease-out; width: 40px; vertical-align: middle; } .imglykit-container .imglykit-controls li.imglykit-controls-item-active { background: rgba(0, 0, 0, 0.3); } .imglykit-container .imglykit-controls li .imglykit-controls-label { -webkit-transition: all .2s ease-out; -moz-transition: all .2s ease-out false; -o-transition: all .2s ease-out false; transition: all .2s ease-out; filter: alpha(opacity=0); opacity: 0; position: absolute; bottom: -20px; width: 100%; color: white; font: bold 10px Helvetica,Arial,sans-serif; text-align: center; } .imglykit-container .imglykit-controls li:hover .imglykit-controls-label { filter: alpha(opacity=100); opacity: 1; bottom: 13px; } .imglykit-container .imglykit-controls .imglykit-controls-item-label { color: white; font-size: 10px; font-family: Helvetica,Arial,sans-serif; font-weight: bold; margin-top: 10px; } .imglykit-container .imglykit-controls .imglykit-controls-icon { width: 80px; height: 80px; line-height: 80px; font-size: 0; } .imglykit-container .imglykit-controls .imglykit-controls-icon img { vertical-align: middle; } .imglykit-container .imglykit-controls .imglykit-controls-item-canvas { display: inline-block; width: 42px; height: 50px; vertical-align: middle; } .imglykit-container .imglykit-controls li[data-disabled] { filter: alpha(opacity=20); opacity: .2; } .imglykit-container .imglykit-controls li:hover:not([data-disabled]), .imglykit-container .imglykit-controls .imglykit-controls-button:hover:not([data-disabled]) { -webkit-box-shadow: 0 -3px 0 0 #43adeb inset; -moz-box-shadow: 0 -3px 0 0 #43adeb inset; box-shadow: 0 -3px 0 0 #43adeb inset; background-color: rgba(0, 0, 0, 0.3); } .imglykit-container .imglykit-controls li:hover:not([data-disabled]) img, .imglykit-container .imglykit-controls .imglykit-controls-button:hover:not([data-disabled]) img { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } .imglykit-container .imglykit-controls .imglykit-controls-button { -webkit-transition: background-color .2s ease-out; -moz-transition: background-color .2s ease-out false; -o-transition: background-color .2s ease-out false; transition: background-color .2s ease-out; width: 80px; height: 80px; line-height: 80px; font-size: 0; cursor: pointer; position: relative; } .imglykit-container .imglykit-controls .imglykit-controls-button:first-child { border-right: 1px solid #363636; } .imglykit-container .imglykit-controls .imglykit-controls-button:last-child { border-left: 1px solid #363636; } .imglykit-container .imglykit-controls .imglykit-controls-button img { vertical-align: middle; width: 40px; -webkit-transition: all .2s ease-out; -moz-transition: all .2s ease-out false; -o-transition: all .2s ease-out false; transition: all .2s ease-out; } .imglykit-container .imglykit-controls .imglykit-controls-done .imglykit-controls-done-highlighted { display: none; position: absolute; top: 0; left: 0; width: 80px; height: 80px; line-height: 80px; } .imglykit-container .imglykit-controls .imglykit-controls-done.highlighted > img { display: none; } .imglykit-container .imglykit-controls .imglykit-controls-done.highlighted .imglykit-controls-done-highlighted { display: block; } .imglykit-container .imglykit-controls-overview ul.imglykit-controls-list { display: block; } .imglykit-container .imglykit-controls-filters ul.imglykit-controls-list li { line-height: normal; } .imglykit-container .imglykit-controls-filters ul.imglykit-controls-list li img { width: 40px; height: 40px; margin-top: 10px; } .imglykit-container .imglykit-controls-stickers ul.imglykit-controls-list li { background-size: 42px; background-repeat: no-repeat; background-position: center center; } .imglykit-container .imglykit-canvas-stickers-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; } .imglykit-container .imglykit-canvas-stickers-container .imglykit-canvas-stickers { position: relative; display: inline-block; cursor: move; } .imglykit-container .imglykit-canvas-stickers-container .imglykit-canvas-stickers .imglykit-knob { bottom: 0; right: 0; } .imglykit-container .imglykit-controls-text ul.imglykit-controls-list li { color: white; font-size: 32px; line-height: 80px; } .imglykit-container .imglykit-canvas-text-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .imglykit-container .imglykit-canvas-text-container .imglykit-canvas-text { position: relative; display: inline-block; } .imglykit-container .imglykit-canvas-text-container .imglykit-canvas-text .imglykit-crosshair { position: absolute; z-index: 5; top: 0; left: 0; margin-top: -17px; margin-left: -17px; width: 34px; height: 34px; } .imglykit-container .imglykit-canvas-text-container .imglykit-canvas-text .imglykit-canvas-text-textarea { position: relative; display: inline-block; } .imglykit-container .imglykit-canvas-text-container .imglykit-canvas-text .imglykit-canvas-text-textarea textarea { border: 2px solid white; background: transparent; resize: none; padding: 0; } .imglykit-container .imglykit-canvas-text-container .imglykit-canvas-text .imglykit-canvas-text-textarea .imglykit-knob { bottom: -2px; right: -8px; } .imglykit-container .imglykit-slider { display: table; table-layout: fixed; width: 100%; height: 80px; line-height: 80px; } .imglykit-container .imglykit-slider > * { display: table-cell; } .imglykit-container .imglykit-slider .imglykit-slider-content { position: absolute; top: 38px; width: 100%; } .imglykit-container .imglykit-slider .imglykit-slider-minus, .imglykit-container .imglykit-slider .imglykit-slider-plus { filter: alpha(opacity=20); opacity: .2; color: white; font-size: 12px; width: 40px; text-align: center; } .imglykit-container .imglykit-slider .imglykit-slider-slider { width: auto; position: relative; z-index: 1; } .imglykit-container .imglykit-slider .imglykit-slider-slider .imglykit-slider-background, .imglykit-container .imglykit-slider .imglykit-slider-slider .imglykit-slider-fill { -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; background: #1a1a1a; height: 12px; top: 50%; margin-top: -8px; cursor: pointer; } .imglykit-container .imglykit-slider .imglykit-slider-slider .imglykit-slider-fill { position: absolute; background: #43adeb; } .imglykit-container .imglykit-slider .imglykit-slider-slider .imglykit-slider-center-dot { -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; width: 24px; height: 24px; background: #43adeb; position: absolute; left: 50%; top: 50%; cursor: pointer; margin: -14px 0 0 -12px; } .imglykit-container .imglykit-slider .imglykit-slider-slider .imglykit-slider-dot { -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5); box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5); width: 30px; height: 30px; background: white; position: absolute; left: 50%; top: 50%; margin: -17px 0 0 -15px; cursor: pointer; } .imglykit-container .imglykit-color-picker { position: relative; border-left: 1px solid #363636; height: 80px; } .imglykit-container .imglykit-color-picker .imglykit-color-picker-color { -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; background: black; margin-top: 15px; } .imglykit-container .imglykit-color-picker .imglykit-controls-item-label { position: absolute; line-height: 11px; width: 100%; bottom: 10px; left: 0; } .imglykit-container .imglykit-color-picker .imglykit-transparent-knob { pointer-events: none; } .imglykit-container .imglykit-color-picker canvas { cursor: pointer; } .imglykit-container .imglykit-color-picker-overlay { position: absolute; cursor: default; background: #353535; width: 240px; height: 240px; padding: 20px; z-index: 2; bottom: 115px; right: -80px; position: absolute; border-color: #353535; display: none; } .imglykit-container .imglykit-color-picker-overlay:before { position: absolute; content: ""; width: 0; height: 0; border-color: #353535; top: 100%; left: 50%; margin-top: -1px; margin-left: -15px; border-left: 15px solid transparent; border-right: 15px solid transparent; border-top: 15px solid #353535; border-top-color: inherit; } .imglykit-container .imglykit-color-picker-overlay.imglykit-visible { display: block; } .imglykit-container .imglykit-color-picker-overlay .imglykit-color-picker-alpha-container { width: 200px; height: 30px; position: relative; margin-bottom: 10px; } .imglykit-container .imglykit-color-picker-overlay .imglykit-color-picker-alpha-container canvas { background: black; position: absolute; left: 0; top: 0; } .imglykit-container .imglykit-color-picker-overlay .imglykit-color-picker-alpha-container .imglykit-transparent-knob { top: 50%; } .imglykit-container .imglykit-color-picker-overlay .imglykit-color-picker-hue-container { width: 30px; height: 160px; position: relative; float: left; } .imglykit-container .imglykit-color-picker-overlay .imglykit-color-picker-hue-container canvas { background: black; position: absolute; top: 0; left: 0; } .imglykit-container .imglykit-color-picker-overlay .imglykit-color-picker-hue-container .imglykit-transparent-knob { left: 50%; } .imglykit-container .imglykit-color-picker-overlay .imglykit-color-picker-saturation-container { width: 160px; height: 160px; position: relative; float: left; margin-right: 10px; } .imglykit-container .imglykit-color-picker-overlay .imglykit-color-picker-saturation-container canvas { background: black; position: absolute; top: 0; left: 0; } .imglykit-container .imglykit-canvas-crop-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: table; table-layout: fixed; } .imglykit-container .imglykit-canvas-crop-container.imglykit-canvas-crop-container-hidden { display: none; } .imglykit-container .imglykit-canvas-crop-container > * { display: table-row; } .imglykit-container .imglykit-canvas-crop-container > * > * { display: table-cell; background: rgba(34, 34, 34, 0.9); } .imglykit-container .imglykit-canvas-crop-container .imglykit-canvas-crop-center-center { position: relative; background: transparent; cursor: move; border: 1px solid white; } .imglykit-container .imglykit-canvas-crop-container .imglykit-canvas-crop-center-center.imglykit-canvas-crop-center-center-nomove { cursor: auto; } .imglykit-container .imglykit-canvas-crop-container .imglykit-canvas-crop-knobs { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: rgba(255, 255, 255, 0); } .imglykit-container .imglykit-canvas-crop-container .imglykit-canvas-crop-knobs > * { -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; position: absolute; background: white; width: 20px; height: 20px; border: 2px solid rgba(0, 0, 0, 0.3); cursor: pointer; } .imglykit-container .imglykit-canvas-crop-container .imglykit-canvas-crop-knobs [data-corner=top-left] { top: -10px; left: -10px; } .imglykit-container .imglykit-canvas-crop-container .imglykit-canvas-crop-knobs [data-corner=top-right] { top: -10px; right: -10px; } .imglykit-container .imglykit-canvas-crop-container .imglykit-canvas-crop-knobs [data-corner=bottom-left] { bottom: -10px; left: -10px; } .imglykit-container .imglykit-canvas-crop-container .imglykit-canvas-crop-knobs [data-corner=bottom-right] { bottom: -10px; right: -10px; } .imglykit-container .imglykit-canvas-radial-blur-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .imglykit-container .imglykit-canvas-radial-blur-container .imglykit-canvas-radial-blur-dot { -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; position: absolute; background: white; width: 20px; height: 20px; border: 2px solid rgba(0, 0, 0, 0.3); cursor: pointer; margin-left: -10px; margin-top: -10px; } .imglykit-container .imglykit-canvas-radial-blur-container .imglykit-canvas-radial-blur-circle-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; } .imglykit-container .imglykit-canvas-radial-blur-container .imglykit-canvas-radial-blur-circle { -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; border: 2px solid white; position: absolute; top: 0; left: 0; width: 100px; height: 100px; pointer-events: none; } .imglykit-container .imglykit-canvas-tilt-shift-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .imglykit-container .imglykit-canvas-tilt-shift-container .imglykit-canvas-tilt-shift-dot { -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; position: absolute; background: white; width: 20px; height: 20px; border: 2px solid rgba(0, 0, 0, 0.3); cursor: pointer; margin-left: -10px; margin-top: -10px; } .imglykit-container .imglykit-canvas-tilt-shift-container .imglykit-canvas-tilt-shift-rect-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; } .imglykit-container .imglykit-canvas-tilt-shift-container .imglykit-canvas-tilt-shift-rect { border: 2px solid white; position: absolute; top: 0; left: 0; width: 100px; height: 100px; pointer-events: none; } .imglykit-container .imglykit-canvas-brush-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; cursor: none; background: rgba(255, 255, 255, 0); } #imglykit-brush-cursor { width: 200px; height: 200px; background: green; position: absolute; top: 0; left: 0; border-radius: 50%; z-index: 1; border: 2px solid white; display: none; } .imglykit-container .imglykit-scrollbar-background { -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out false; -o-transition: all .3s ease-out false; transition: all .3s ease-out; filter: alpha(opacity=0); opacity: 0; width: 100%; height: 11px; background: #1e1e1e; position: absolute; bottom: 0; left: 0; cursor: pointer; } .imglykit-container .imglykit-scrollbar-background.visible { filter: alpha(opacity=100); opacity: 1; } .imglykit-container .imglykit-scrollbar-button { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; background: #43adeb; height: 7px; position: absolute; left: 0; top: 0; width: 50px; margin: 2px; cursor: pointer; } /* Imglykit overrides */ #imgly-container { width: 100%; height: 100%; position: absolute !important; left: 0; right: 0; } #imgly-container .imglykit { border-radius: 0px; } .imglykit-flashOverlay { display: none !important; } .imglykit-container div.save-as { border-right: 1px solid #363636; padding: 0 28px 0 20px; text-align: center; cursor: pointer; font-size: 1em; font-weight: 500; background: #7985a3; color: #fff; border-radius: 0; box-shadow: none; line-height: 50px; outline: none; } .imglykit-container div.save-as .checkmark { display: inline-block; width: 29px; height: 25px; margin-right: 10px; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); } .imglykit-container div.save-as .checkmark-stem { position: absolute; width: 3px; height: 19px; background-color: #fff; left: 19px; top: 4px; } .imglykit-container div.save-as .checkmark-kick { position: absolute; width: 9px; height: 3px; background-color: #fff; left: 10px; top: 20px; } .imglykit-container div.save-as:hover { background: #637090; } .imglykit-container div.save-as:active { background: #919bb4; } .imglykit-container .imglykit-header-row, .imglykit-container .imglykit-export, .imglykit-container .imglykit-zoom-level { display: none !important; } .imglykit-container .imglykit-canvas-container { padding-top: 0px; } .imglykit-container .imglykit-top-controls { height: 50px; line-height: 50px; padding: 0; } .imglykit-container .imglykit-top-controls-left { padding-top: 0; } .imglykit-container .imglykit-top-controls-right { padding-top: 0px; } .imglykit-container .imglykit-top-controls-right .imglykit-zoom-in, .imglykit-container .imglykit-top-controls-right .imglykit-zoom-out, .imglykit-container .imglykit-top-controls-right .close-imgly { cursor: pointer; padding: 0 20px; } .imglykit-container .imglykit-top-controls-right .imglykit-zoom-in:hover, .imglykit-container .imglykit-top-controls-right .imglykit-zoom-out:hover, .imglykit-container .imglykit-top-controls-right .close-imgly:hover { filter: alpha(opacity=50); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; -webkit-opacity: 0.5; -khtml-opacity: 0.5; -moz-opacity: 0.5; -ms-opacity: 0.5; -o-opacity: 0.5; opacity: 0.5; } .imglykit-container .imglykit-top-controls-right * { line-height: 50px; } .imglykit-container .imglykit-top-controls-right .imglykit-zoom-out { border-right: 1px solid #363636; } .imglykit-container .imglykit-top-controls .imglykit-top-controls-right { line-height: 50px; } .imglykit-container .imglykit-slider .imglykit-slider-slider .imglykit-slider-center-dot, .imglykit-container .imglykit-slider .imglykit-slider-slider .imglykit-slider-fill { background: #1997ff; } .imglykit-container .imglykit-undo, .imglykit-container .imglykit-undo img, .imglykit-container .imglykit-top-controls-right .imglykit-zoom-in img, .imglykit-container .imglykit-top-controls-right .imglykit-zoom-out img { filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; -webkit-opacity: 1; -khtml-opacity: 1; -moz-opacity: 1; -ms-opacity: 1; -o-opacity: 1; opacity: 1; color: #fff; } .imglykit-container .imglykit-undo:hover { filter: alpha(opacity=50); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; -webkit-opacity: 0.5; -khtml-opacity: 0.5; -moz-opacity: 0.5; -ms-opacity: 0.5; -o-opacity: 0.5; opacity: 0.5; } .imglykit-container .imglykit-controls li:hover:not([data-disabled]), .imglykit-container .imglykit-controls .imglykit-controls-button:hover:not([data-disabled]) { -webkit-box-shadow: rgba(25, 151, 255, 0.2) 0 -3px 0 0; -khtml-box-shadow: rgba(25, 151, 255, 0.2) 0 -3px 0 0; -moz-box-shadow: rgba(25, 151, 255, 0.2) 0 -3px 0 0; -ms-box-shadow: rgba(25, 151, 255, 0.2) 0 -3px 0 0; -o-box-shadow: rgba(25, 151, 255, 0.2) 0 -3px 0 0; box-shadow: rgba(25, 151, 255, 0.2) 0 -3px 0 0; } #photo-editor { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 300; } #photo-editor .imgly-header { position: absolute; top: 0; color: #fff; text-align: center; display: block; left: 50%; height: 50px; line-height: 50px; } #photo-editor .close-imgly:before { content: "\E070"; font-size: 15px; line-height: 15px; vertical-align: middle; display: inline-block; } #photo-editor .screen { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: #050505; display: none; filter: alpha(opacity=60); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; -webkit-opacity: 0.6; -khtml-opacity: 0.6; -moz-opacity: 0.6; -ms-opacity: 0.6; -o-opacity: 0.6; opacity: 0.6; z-index: 200; } #photo-editor .screen .loading { width: 50px; height: 50px; overflow: hidden; vertical-align: middle; display: inline-block; position: absolute; left: 50%; top: 50%; margin: -25px 0 0 -25px; } #photo-editor.fetching .screen, #photo-editor.saving .screen { display: block; } @charset "UTF-8"; /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ .uploader-drag.active .dot-1, .uploader-drag.active .dot-2, .uploader-drag.active .dot-3, .uploader-drag.active .dot-4, .uploader-drag.active .circle-1, .uploader-drag.active .circle-2, .uploader-drag.active .circle-3, .uploader-drag.active .photo, .uploader-drag.active .gif, .uploader-drag.active .video, .uploader-drag.active .plus-1, .uploader-drag.active .plus-2, .uploader-drag.active .plus-3, .uploader-drag.active .label { -webkit-animation: none 333ms linear infinite; -khtml-animation: none 333ms linear infinite; -moz-animation: none 333ms linear infinite; -ms-animation: none 333ms linear infinite; -o-animation: none 333ms linear infinite; animation: none 333ms linear infinite; } .uploader-drag.active .dot-1, .uploader-drag.active .dot-2, .uploader-drag.active .dot-3, .uploader-drag.active .dot-4, .uploader-drag.active .circle-1, .uploader-drag.active .circle-2, .uploader-drag.active .circle-3, .uploader-drag.active .photo, .uploader-drag.active .gif, .uploader-drag.active .video { -webkit-animation-name: bounce-sm; -khtml-animation-name: bounce-sm; -moz-animation-name: bounce-sm; -ms-animation-name: bounce-sm; -o-animation-name: bounce-sm; animation-name: bounce-sm; -webkit-animation-duration: 333ms; -khtml-animation-duration: 333ms; -moz-animation-duration: 333ms; -ms-animation-duration: 333ms; -o-animation-duration: 333ms; animation-duration: 333ms; -webkit-animation-timing-function: ease; -khtml-animation-timing-function: ease; -moz-animation-timing-function: ease; -ms-animation-timing-function: ease; -o-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-iteration-count: 1; -khtml-animation-iteration-count: 1; -moz-animation-iteration-count: 1; -ms-animation-iteration-count: 1; -o-animation-iteration-count: 1; animation-iteration-count: 1; } .uploader-drag.active .plus-1, .uploader-drag.active .plus-2, .uploader-drag.active .plus-3 { -webkit-animation-name: bounce-and-spin; -khtml-animation-name: bounce-and-spin; -moz-animation-name: bounce-and-spin; -ms-animation-name: bounce-and-spin; -o-animation-name: bounce-and-spin; animation-name: bounce-and-spin; -webkit-animation-duration: 333ms; -khtml-animation-duration: 333ms; -moz-animation-duration: 333ms; -ms-animation-duration: 333ms; -o-animation-duration: 333ms; animation-duration: 333ms; -webkit-animation-timing-function: ease; -khtml-animation-timing-function: ease; -moz-animation-timing-function: ease; -ms-animation-timing-function: ease; -o-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-iteration-count: 1; -khtml-animation-iteration-count: 1; -moz-animation-iteration-count: 1; -ms-animation-iteration-count: 1; -o-animation-iteration-count: 1; animation-iteration-count: 1; } .uploader-drag.active .label { -webkit-animation-name: pop-up-from-below; -khtml-animation-name: pop-up-from-below; -moz-animation-name: pop-up-from-below; -ms-animation-name: pop-up-from-below; -o-animation-name: pop-up-from-below; animation-name: pop-up-from-below; -webkit-animation-duration: 500ms; -khtml-animation-duration: 500ms; -moz-animation-duration: 500ms; -ms-animation-duration: 500ms; -o-animation-duration: 500ms; animation-duration: 500ms; -webkit-animation-timing-function: ease; -khtml-animation-timing-function: ease; -moz-animation-timing-function: ease; -ms-animation-timing-function: ease; -o-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-iteration-count: 1; -khtml-animation-iteration-count: 1; -moz-animation-iteration-count: 1; -ms-animation-iteration-count: 1; -o-animation-iteration-count: 1; animation-iteration-count: 1; } /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ .uploader-drag.active .dot-1, .uploader-drag.active .dot-2, .uploader-drag.active .dot-3, .uploader-drag.active .dot-4, .uploader-drag.active .circle-1, .uploader-drag.active .circle-2, .uploader-drag.active .circle-3, .uploader-drag.active .photo, .uploader-drag.active .gif, .uploader-drag.active .video, .uploader-drag.active .plus-1, .uploader-drag.active .plus-2, .uploader-drag.active .plus-3, .uploader-drag.active .label { -webkit-animation: none 333ms linear infinite; -khtml-animation: none 333ms linear infinite; -moz-animation: none 333ms linear infinite; -ms-animation: none 333ms linear infinite; -o-animation: none 333ms linear infinite; animation: none 333ms linear infinite; } /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ .uploader-drag.active .dot-1, .uploader-drag.active .dot-2, .uploader-drag.active .dot-3, .uploader-drag.active .dot-4, .uploader-drag.active .circle-1, .uploader-drag.active .circle-2, .uploader-drag.active .circle-3, .uploader-drag.active .photo, .uploader-drag.active .gif, .uploader-drag.active .video, .uploader-drag.active .plus-1, .uploader-drag.active .plus-2, .uploader-drag.active .plus-3, .uploader-drag.active .label { -webkit-animation: none 333ms linear infinite; -khtml-animation: none 333ms linear infinite; -moz-animation: none 333ms linear infinite; -ms-animation: none 333ms linear infinite; -o-animation: none 333ms linear infinite; animation: none 333ms linear infinite; } .uploader-drag.active .dot-1, .uploader-drag.active .dot-2, .uploader-drag.active .dot-3, .uploader-drag.active .dot-4, .uploader-drag.active .circle-1, .uploader-drag.active .circle-2, .uploader-drag.active .circle-3, .uploader-drag.active .photo, .uploader-drag.active .gif, .uploader-drag.active .video { -webkit-animation-name: bounce-sm; -khtml-animation-name: bounce-sm; -moz-animation-name: bounce-sm; -ms-animation-name: bounce-sm; -o-animation-name: bounce-sm; animation-name: bounce-sm; -webkit-animation-duration: 333ms; -khtml-animation-duration: 333ms; -moz-animation-duration: 333ms; -ms-animation-duration: 333ms; -o-animation-duration: 333ms; animation-duration: 333ms; -webkit-animation-timing-function: ease; -khtml-animation-timing-function: ease; -moz-animation-timing-function: ease; -ms-animation-timing-function: ease; -o-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-iteration-count: 1; -khtml-animation-iteration-count: 1; -moz-animation-iteration-count: 1; -ms-animation-iteration-count: 1; -o-animation-iteration-count: 1; animation-iteration-count: 1; } .uploader-drag.active .plus-1, .uploader-drag.active .plus-2, .uploader-drag.active .plus-3 { -webkit-animation-name: bounce-and-spin; -khtml-animation-name: bounce-and-spin; -moz-animation-name: bounce-and-spin; -ms-animation-name: bounce-and-spin; -o-animation-name: bounce-and-spin; animation-name: bounce-and-spin; -webkit-animation-duration: 333ms; -khtml-animation-duration: 333ms; -moz-animation-duration: 333ms; -ms-animation-duration: 333ms; -o-animation-duration: 333ms; animation-duration: 333ms; -webkit-animation-timing-function: ease; -khtml-animation-timing-function: ease; -moz-animation-timing-function: ease; -ms-animation-timing-function: ease; -o-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-iteration-count: 1; -khtml-animation-iteration-count: 1; -moz-animation-iteration-count: 1; -ms-animation-iteration-count: 1; -o-animation-iteration-count: 1; animation-iteration-count: 1; } .uploader-drag.active .label { -webkit-animation-name: pop-up-from-below; -khtml-animation-name: pop-up-from-below; -moz-animation-name: pop-up-from-below; -ms-animation-name: pop-up-from-below; -o-animation-name: pop-up-from-below; animation-name: pop-up-from-below; -webkit-animation-duration: 500ms; -khtml-animation-duration: 500ms; -moz-animation-duration: 500ms; -ms-animation-duration: 500ms; -o-animation-duration: 500ms; animation-duration: 500ms; -webkit-animation-timing-function: ease; -khtml-animation-timing-function: ease; -moz-animation-timing-function: ease; -ms-animation-timing-function: ease; -o-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-iteration-count: 1; -khtml-animation-iteration-count: 1; -moz-animation-iteration-count: 1; -ms-animation-iteration-count: 1; -o-animation-iteration-count: 1; animation-iteration-count: 1; } /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ /* ------------------------------------------------------------- Mixins meant to replace the use of z-index completely. These allow developers to focus on the intent of positioning as named layers. Each of these mixins accepts an $adjust value, which is there to allow you to prioritize multiple elements in the same layer. Mixins available: - layer-background Arguments: [$adjust] Adds approprite z-index value for elements that are meant to be below the page's main content - layer-midground Arguments: [$adjust] Adds appropriate z-index value for elements that are the page's primary content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that are meant to be priminent / above the main content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that should appear above everything else (IE - modals) ------------------------------------------------------------- */ /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ .uploader-drag { position: fixed; top: 0; left: 0; right: 0; bottom: 0; border: 0px solid #3d7eda; transition: border 300ms ease, opacity 300ms ease; background: rgba(35, 47, 64, 0.9); opacity: 0; z-index: 303; /* ____ .'* *.' __/_*_*(_ / _______ _\_)/___\(_/_ / _((\- -/))_ \ \())(-)(()/ / ' \(((()))/ ' / ' \)).))/ ' / _ \ - | - /_ ( ( .;''';. .' ) _\"__ / )\ __"/_ \/ \ ' / \/ .' '...' ' ) / / | \ / . . . / . . / / | \ .' / b '. '. _.-' / Bb '-. '-._ _.-' | BBb '-. '-. (________mrf\____.dBBBb.________)____) ʕ◴ ᴥ ◶ʔ CSS MAGIC */ } .uploader-drag figure { position: absolute; top: 50%; left: 50%; -webkit-transform: translateY(-50%) translateX(-50%); -khtml-transform: translateY(-50%) translateX(-50%); -moz-transform: translateY(-50%) translateX(-50%); -ms-transform: translateY(-50%) translateX(-50%); -o-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); } .uploader-drag .label { display: block; margin-top: 15px; text-align: center; font-size: 1.2em; font-weight: bold; color: #fff; } .uploader-drag .label, .uploader-drag .plus-1, .uploader-drag .plus-2, .uploader-drag .plus-3, .uploader-drag .dot-1, .uploader-drag .dot-2, .uploader-drag .dot-3, .uploader-drag .dot-4, .uploader-drag .circle-1, .uploader-drag .circle-2, .uploader-drag .circle-3, .uploader-drag .photo, .uploader-drag .gif, .uploader-drag .video { opacity: 0; transition: opacity 300ms ease; } .uploader-drag .gif { animation-delay: 100ms; transition-delay: 100ms; } .uploader-drag .photo { animation-delay: 200ms; transition-delay: 200ms; } .uploader-drag.active { border-width: 10px; opacity: 1; } .uploader-drag.active .label { opacity: 1; } .uploader-drag.active .plus-1, .uploader-drag.active .plus-2, .uploader-drag.active .plus-3 { opacity: 1; animation-duration: 300ms; } .uploader-drag.active .dot-1, .uploader-drag.active .dot-2, .uploader-drag.active .dot-3, .uploader-drag.active .dot-4, .uploader-drag.active .circle-1, .uploader-drag.active .circle-2, .uploader-drag.active .circle-3, .uploader-drag.active .photo, .uploader-drag.active .gif, .uploader-drag.active .video { opacity: 1; animation-duration: 300ms; } .uploader-drag.active .label { animation-delay: 200ms; transition-delay: 200ms; } .uploader-drag.active .photo { animation-delay: 0ms; transition-delay: 0ms; } .uploader-drag.active .gif { animation-delay: 100ms; transition-delay: 100ms; } .uploader-drag.active .video { animation-delay: 200ms; transition-delay: 200ms; } .uploader-drag.active .plus-1 { animation-delay: 350ms; transition-delay: 350ms; } .uploader-drag.active .plus-2 { animation-delay: 250ms; transition-delay: 250ms; } .uploader-drag.active .plus-3 { animation-delay: 250ms; transition-delay: 250ms; } .uploader-drag.active .dot-1 { animation-delay: 150ms; transition-delay: 150ms; } .uploader-drag.active .dot-2 { animation-delay: 200ms; transition-delay: 200ms; } .uploader-drag.active .dot-3 { animation-delay: 300ms; transition-delay: 300ms; } .uploader-drag.active .dot-4 { animation-delay: 150ms; transition-delay: 150ms; } .uploader-drag.active .circle-1 { animation-delay: 50ms; transition-delay: 50ms; } .uploader-drag.active .circle-2 { animation-delay: 300ms; transition-delay: 300ms; } .uploader-drag.active .circle-3 { animation-delay: 250ms; transition-delay: 250ms; } @charset "UTF-8"; /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ #share-landing .download-link, #share-landing .photos-promotion .learn-more { display: inline-block; padding: 0 15px; height: 2.5em; line-height: 2.5em; border-radius: 4px; text-align: center; border: none; font-family: inherit; font-size: inherit; font-weight: bold; letter-spacing: 0.4px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #share-landing .download-link:disabled, #share-landing .photos-promotion .learn-more:disabled, #share-landing .disabled.download-link, #share-landing .photos-promotion .disabled.learn-more { cursor: default; } #share-landing .download-link + a, #share-landing .photos-promotion .learn-more + a, #share-landing .download-link + button, #share-landing .photos-promotion .learn-more + button { margin-left: 15px; } #share-landing .download-link { background: #FECB88; color: #765627; } #share-landing .download-link:enabled:hover { background-color: #F2B769; color: #765627; } #share-landing .download-link:enabled:active, #share-landing .download-link:enabled.active, #share-landing .download-link:enabled:focus { background-color: #ffeacf; color: #765627; } #share-landing .download-link:disabled, #share-landing .disabled.download-link { background-color: #fee1bb; } #share-landing .secondary.download-link { background-color: #7985a3; color: #fff; font-weight: normal; } #share-landing .secondary.download-link:enabled:hover { color: #fff; background-color: #637090; } #share-landing .secondary.download-link:enabled:focus, #share-landing .secondary.download-link:enabled:active, #share-landing .secondary.download-link:enabled.active { background-color: #919bb4; color: #fff; } #share-landing .secondary.download-link:disabled, #share-landing .disabled.secondary.download-link { background-color: #e3e5ec; } #share-landing .photos-promotion .learn-more { background: none; color: inherit; } #share-landing .photos-promotion .learn-more:enabled:hover, #share-landing .photos-promotion .learn-more:enabled:focus, #share-landing .photos-promotion .learn-more:enabled:active, #share-landing .photos-promotion .learn-more:enabled.active { color: inherit; background: none; } /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ /* ------------------------------------------------------------- Mixins meant to replace the use of z-index completely. These allow developers to focus on the intent of positioning as named layers. Each of these mixins accepts an $adjust value, which is there to allow you to prioritize multiple elements in the same layer. Mixins available: - layer-background Arguments: [$adjust] Adds approprite z-index value for elements that are meant to be below the page's main content - layer-midground Arguments: [$adjust] Adds appropriate z-index value for elements that are the page's primary content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that are meant to be priminent / above the main content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that should appear above everything else (IE - modals) ------------------------------------------------------------- */ #share-landing .download-link:before, #share-landing .report-abuse:before, #share-landing .photos-promotion .close:before { font-family: "fontIcons"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; text-transform: none; } /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ #share-landing .download-link { margin-left: 30px; } #share-landing .download-link:before { content: "\E01A"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; } #share-landing .download-link span { margin-left: 8px; } body.mobile #share-landing .download-link { margin-left: 15px; } body.mobile #share-landing .download-link span { display: none; } #share-landing .report-abuse:before { content: "\E031"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; } #share-landing .secondary-head { border-bottom: 2px solid #EEE; } #share-landing .secondary-head .report-abuse:before { margin-right: 5px; } #share-landing .secondary-head .column-1 { text-align: left; } #share-landing .secondary-head .overflow .column-size { display: block; } #share-landing .secondary-head .overflow .shared-date { margin: 0; display: block; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #share-landing .secondary-head .shared-date { white-space: nowrap; font-weight: bold; } #share-landing .secondary-head .shared-date .date { text-transform: lowercase; } body.mobile #share-landing .secondary-head h1 { text-align: left; } #share-landing .photos-promotion { position: fixed; background: #3d7eda; color: #fff; bottom: 0; left: 0; right: 0; text-align: center; padding: 50px; opacity: 0; -webkit-transform: translateY(100%); -khtml-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); -webkit-transition: opacity 333ms ease, transform 333ms ease; -khtml-transition: opacity 333ms ease, transform 333ms ease; -moz-transition: opacity 333ms ease, transform 333ms ease; -ms-transition: opacity 333ms ease, transform 333ms ease; -o-transition: opacity 333ms ease, transform 333ms ease; transition: opacity 333ms ease, transform 333ms ease; } #share-landing .photos-promotion.visible { opacity: 1; -webkit-transform: none; -khtml-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; } #share-landing .photos-promotion svg, #share-landing .photos-promotion h5, #share-landing .photos-promotion p { display: block; margin: 0 auto 15px auto; color: #fff; } #share-landing .photos-promotion p a { text-decoration: underline; color: #fff; } #share-landing .photos-promotion svg path { fill: #fff; } #share-landing .photos-promotion .learn-more { color: #3d7eda !important; background: #fff !important; opacity: 0.9; } #share-landing .photos-promotion .learn-more:hover, #share-landing .photos-promotion .learn-more:focus { opacity: 1; } #share-landing .photos-promotion .close { position: absolute; top: 25px; right: 25px; background: rgba(255, 255, 255, 0.8); color: #3d7eda; border-radius: 50%; } #share-landing .photos-promotion .close:before { content: "\E070"; font-size: 14px; line-height: 14px; vertical-align: middle; display: inline-block; width: 30px; height: 30px; line-height: 30px; text-align: center; } #share-landing .customer-content-message { position: fixed; width: 100%; left: 0; bottom: 0; height: 40px; line-height: 40px; text-align: center; background: #fff; background: rgba(255, 255, 255, 0.93); } body.mobile #share-landing .customer-content-message { font-size: 12px; } @charset "UTF-8"; /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ .secondary-head .visible-options .share, .secondary-head .visible-options .ratedAlbum, .secondary-head .visible-options .rateAlbum, .secondary-head .visible-options .addToFamilyArchive, .secondary-head .visible-options .removeFromFamilyArchive { display: inline-block; padding: 0 15px; height: 2.5em; line-height: 2.5em; border-radius: 4px; text-align: center; border: none; font-family: inherit; font-size: inherit; font-weight: bold; letter-spacing: 0.4px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .secondary-head .visible-options .share:disabled, .secondary-head .visible-options .ratedAlbum:disabled, .secondary-head .visible-options .rateAlbum:disabled, .secondary-head .visible-options .addToFamilyArchive:disabled, .secondary-head .visible-options .removeFromFamilyArchive:disabled, .secondary-head .visible-options .disabled.share, .secondary-head .visible-options .disabled.ratedAlbum, .secondary-head .visible-options .disabled.rateAlbum, .secondary-head .visible-options .disabled.addToFamilyArchive, .secondary-head .visible-options .disabled.removeFromFamilyArchive { cursor: default; } .secondary-head .visible-options .share + a, .secondary-head .visible-options .ratedAlbum + a, .secondary-head .visible-options .rateAlbum + a, .secondary-head .visible-options .addToFamilyArchive + a, .secondary-head .visible-options .removeFromFamilyArchive + a, .secondary-head .visible-options .share + button, .secondary-head .visible-options .ratedAlbum + button, .secondary-head .visible-options .rateAlbum + button, .secondary-head .visible-options .addToFamilyArchive + button, .secondary-head .visible-options .removeFromFamilyArchive + button { margin-left: 15px; } .secondary-head .visible-options .share, .secondary-head .visible-options .ratedAlbum, .secondary-head .visible-options .rateAlbum { background: #FECB88; color: #765627; } .secondary-head .visible-options .share:enabled:hover, .secondary-head .visible-options .ratedAlbum:enabled:hover, .secondary-head .visible-options .rateAlbum:enabled:hover { background-color: #F2B769; color: #765627; } .secondary-head .visible-options .share:enabled:active, .secondary-head .visible-options .ratedAlbum:enabled:active, .secondary-head .visible-options .rateAlbum:enabled:active, .secondary-head .visible-options .share:enabled.active, .secondary-head .visible-options .ratedAlbum:enabled.active, .secondary-head .visible-options .rateAlbum:enabled.active, .secondary-head .visible-options .share:enabled:focus, .secondary-head .visible-options .ratedAlbum:enabled:focus, .secondary-head .visible-options .rateAlbum:enabled:focus { background-color: #ffeacf; color: #765627; } .secondary-head .visible-options .share:disabled, .secondary-head .visible-options .ratedAlbum:disabled, .secondary-head .visible-options .rateAlbum:disabled, .secondary-head .visible-options .disabled.share, .secondary-head .visible-options .disabled.ratedAlbum, .secondary-head .visible-options .disabled.rateAlbum { background-color: #fee1bb; } .secondary-head .visible-options .secondary.share, .secondary-head .visible-options .secondary.ratedAlbum, .secondary-head .visible-options .secondary.rateAlbum { background-color: #7985a3; color: #fff; font-weight: normal; } .secondary-head .visible-options .secondary.share:enabled:hover, .secondary-head .visible-options .secondary.ratedAlbum:enabled:hover, .secondary-head .visible-options .secondary.rateAlbum:enabled:hover { color: #fff; background-color: #637090; } .secondary-head .visible-options .secondary.share:enabled:focus, .secondary-head .visible-options .secondary.ratedAlbum:enabled:focus, .secondary-head .visible-options .secondary.rateAlbum:enabled:focus, .secondary-head .visible-options .secondary.share:enabled:active, .secondary-head .visible-options .secondary.ratedAlbum:enabled:active, .secondary-head .visible-options .secondary.rateAlbum:enabled:active, .secondary-head .visible-options .secondary.share:enabled.active, .secondary-head .visible-options .secondary.ratedAlbum:enabled.active, .secondary-head .visible-options .secondary.rateAlbum:enabled.active { background-color: #919bb4; color: #fff; } .secondary-head .visible-options .secondary.share:disabled, .secondary-head .visible-options .secondary.ratedAlbum:disabled, .secondary-head .visible-options .secondary.rateAlbum:disabled, .secondary-head .visible-options .disabled.secondary.share, .secondary-head .visible-options .disabled.secondary.ratedAlbum, .secondary-head .visible-options .disabled.secondary.rateAlbum { background-color: #e3e5ec; } .secondary-head .visible-options .addToFamilyArchive, .secondary-head .visible-options .removeFromFamilyArchive { background: none; color: inherit; } .secondary-head .visible-options .addToFamilyArchive:enabled:hover, .secondary-head .visible-options .removeFromFamilyArchive:enabled:hover, .secondary-head .visible-options .addToFamilyArchive:enabled:focus, .secondary-head .visible-options .removeFromFamilyArchive:enabled:focus, .secondary-head .visible-options .addToFamilyArchive:enabled:active, .secondary-head .visible-options .removeFromFamilyArchive:enabled:active, .secondary-head .visible-options .addToFamilyArchive:enabled.active, .secondary-head .visible-options .removeFromFamilyArchive:enabled.active { color: inherit; background: none; } /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ /* ------------------------------------------------------------- Mixins meant to replace the use of z-index completely. These allow developers to focus on the intent of positioning as named layers. Each of these mixins accepts an $adjust value, which is there to allow you to prioritize multiple elements in the same layer. Mixins available: - layer-background Arguments: [$adjust] Adds approprite z-index value for elements that are meant to be below the page's main content - layer-midground Arguments: [$adjust] Adds appropriate z-index value for elements that are the page's primary content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that are meant to be priminent / above the main content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that should appear above everything else (IE - modals) ------------------------------------------------------------- */ .secondary-head .expandable-nav .toggle:before, .secondary-head .back:before { font-family: "fontIcons"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; text-transform: none; } /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ .secondary-head { text-align: right; height: 80px; line-height: 80px; position: relative; } .app-content.body .secondary-head { top: -30px; } body.mobile .app-content.body .secondary-head { top: -15px; } .secondary-head .columns { height: 80px; } .secondary-head .columns .column { white-space: nowrap; text-align: center; } .secondary-head .columns .column:first-child { text-align: left; } .secondary-head .columns .column:last-child { text-align: right; } .secondary-head .columns .column.overflow a span, .secondary-head .columns .column.overflow button span { display: none; } .secondary-head .columns h1 { font-weight: 600; padding: 0 15px; position: absolute; top: 0; left: 0; width: 100%; font-size: 2em; line-height: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.mobile .secondary-head .columns h1 { font-size: 1.5em; } .secondary-head .columns h3 { font-weight: 600; padding: 0 15px; position: absolute; top: 0; left: 0; width: 100%; text-overflow: ellipsis; overflow: hidden; font-size: 1.33em; line-height: 80px; } .secondary-head .visible-options { display: inline; } .secondary-head .visible-options li { display: inline-block; margin-left: 30px; } body.mobile .secondary-head .visible-options .label, body.tablet .secondary-head .visible-options .label { display: none; } .secondary-head .expandable-nav { display: inline-block; line-height: 45px; } .secondary-head .expandable-nav .toggle { text-align: center; display: inline-block; } .secondary-head .expandable-nav .toggle:before { content: "\E045"; font-size: 4px; line-height: 4px; vertical-align: middle; display: inline-block; } .secondary-head .expandable-nav .expanded-nav { right: -8px; line-height: normal; } .secondary-head .back { float: left; letter-spacing: 0.4px; text-transform: capitalize; } .secondary-head .back:before { content: "\E007"; font-size: 10px; line-height: 10px; vertical-align: middle; display: inline-block; vertical-align: middle; } .secondary-head .back:hover { color: #3d7eda; } .secondary-head .back span { margin-left: 5px; } body.mobile .secondary-head .back span { display: none; } @charset "UTF-8"; /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ .gallery .loading { -webkit-animation: none 333ms linear infinite; -khtml-animation: none 333ms linear infinite; -moz-animation: none 333ms linear infinite; -ms-animation: none 333ms linear infinite; -o-animation: none 333ms linear infinite; animation: none 333ms linear infinite; } .gallery .loading { -webkit-animation-name: spin; -khtml-animation-name: spin; -moz-animation-name: spin; -ms-animation-name: spin; -o-animation-name: spin; animation-name: spin; -webkit-animation-duration: 1000ms; -khtml-animation-duration: 1000ms; -moz-animation-duration: 1000ms; -ms-animation-duration: 1000ms; -o-animation-duration: 1000ms; animation-duration: 1000ms; -webkit-animation-timing-function: linear; -khtml-animation-timing-function: linear; -moz-animation-timing-function: linear; -ms-animation-timing-function: linear; -o-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -khtml-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-iteration-count: infinite; } .gallery .loading { background: center center no-repeat; background-size: cover; background-image: url(data:image/png;base64,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); } /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ .gallery .loading { -webkit-animation: none 333ms linear infinite; -khtml-animation: none 333ms linear infinite; -moz-animation: none 333ms linear infinite; -ms-animation: none 333ms linear infinite; -o-animation: none 333ms linear infinite; animation: none 333ms linear infinite; } /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ .gallery .loading { background: center center no-repeat; background-size: cover; background-image: url(data:image/png;base64,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); } /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ .gallery .loading { -webkit-animation: none 333ms linear infinite; -khtml-animation: none 333ms linear infinite; -moz-animation: none 333ms linear infinite; -ms-animation: none 333ms linear infinite; -o-animation: none 333ms linear infinite; animation: none 333ms linear infinite; } .gallery .loading { -webkit-animation-name: spin; -khtml-animation-name: spin; -moz-animation-name: spin; -ms-animation-name: spin; -o-animation-name: spin; animation-name: spin; -webkit-animation-duration: 1000ms; -khtml-animation-duration: 1000ms; -moz-animation-duration: 1000ms; -ms-animation-duration: 1000ms; -o-animation-duration: 1000ms; animation-duration: 1000ms; -webkit-animation-timing-function: linear; -khtml-animation-timing-function: linear; -moz-animation-timing-function: linear; -ms-animation-timing-function: linear; -o-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -khtml-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-iteration-count: infinite; } /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ /* ------------------------------------------------------------- Mixins meant to replace the use of z-index completely. These allow developers to focus on the intent of positioning as named layers. Each of these mixins accepts an $adjust value, which is there to allow you to prioritize multiple elements in the same layer. Mixins available: - layer-background Arguments: [$adjust] Adds approprite z-index value for elements that are meant to be below the page's main content - layer-midground Arguments: [$adjust] Adds appropriate z-index value for elements that are the page's primary content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that are meant to be priminent / above the main content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that should appear above everything else (IE - modals) ------------------------------------------------------------- */ .gallery .next:before, .gallery .prev:before, .gallery .close:before { font-family: "fontIcons"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; text-transform: none; } /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ .gallery { position: fixed; width: 100%; height: 100%; top: 0; left: 0; background-color: #050505; z-index: 299; /* When face-editing mode is on, gallery UI controls must be hidden, except the nav buttons */ } .gallery a { color: inherit; } .gallery .image-and-controls { position: absolute; top: 0; right: 0; bottom: 0; left: 0; -webkit-transition: bottom 333ms ease; -khtml-transition: bottom 333ms ease; -moz-transition: bottom 333ms ease; -ms-transition: bottom 333ms ease; -o-transition: bottom 333ms ease; transition: bottom 333ms ease; } .gallery .image-drag { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .gallery .image-drag.zoomed { cursor: move; cursor: -webkit-grab; cursor: -moz-grab; } .gallery .image-drag.zoomed:active { cursor: -webkit-grabbing; cursor: -moz-grabbing; } .gallery.details-open .image-and-controls { bottom: 85px; } .gallery .node { position: absolute; top: 0; width: 100%; height: 100%; max-width: 100%; max-height: 100%; -webkit-transition: background 333ms ease, transform 333ms ease, top 0ms ease 333ms, opacity 333ms ease; -khtml-transition: background 333ms ease, transform 333ms ease, top 0ms ease 333ms, opacity 333ms ease; -moz-transition: background 333ms ease, transform 333ms ease, top 0ms ease 333ms, opacity 333ms ease; -ms-transition: background 333ms ease, transform 333ms ease, top 0ms ease 333ms, opacity 333ms ease; -o-transition: background 333ms ease, transform 333ms ease, top 0ms ease 333ms, opacity 333ms ease; transition: background 333ms ease, transform 333ms ease, top 0ms ease 333ms, opacity 333ms ease; z-index: 100; } .gallery .node.dragging { -webkit-transition: none; -khtml-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; } .gallery .node .play { background: #cdd2db; background: rgba(205, 210, 219, 0.2); } .gallery .node.image-loaded .play { background: #fff; background: rgba(255, 255, 255, 0.2); } .gallery .node.image-loaded:hover .play { background: #fff; color: #232f40; } .gallery .node.image-loading:before { display: none; } .gallery .node.preloaded-node { top: 10000px; -webkit-transition: none; -khtml-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; } .gallery img { box-shadow: 0 0 20px rgba(5, 5, 5, 0.5); max-width: 100%; max-height: 100%; } .gallery .loading { width: 50px; height: 50px; overflow: hidden; vertical-align: middle; display: inline-block; margin: -25px auto auto -25px; z-index: 100; } .gallery.face-editing .image-head { display: none; } .gallery.face-editing .prev, .gallery.face-editing .next { filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; -webkit-opacity: 1; -khtml-opacity: 1; -moz-opacity: 1; -ms-opacity: 1; -o-opacity: 1; opacity: 1; } .gallery .lpk-badge { top: auto !important; bottom: 10px; } .gallery .prev, .gallery .next { color: #fff; width: 52px; height: 52px; line-height: 52px; text-align: center; border-radius: 50%; background: #050505; background: rgba(5, 5, 5, 0.5); position: absolute; top: 50%; -webkit-transform: translateY(-50%); -khtml-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); z-index: 200; } .gallery .prev:before, .gallery .next:before { vertical-align: middle; } .gallery .prev:hover, .gallery .next:hover { color: rgba(255, 255, 255, 0.5); } .gallery .next { right: 25px; } .gallery .next:before { content: "\E051"; font-size: 15px; line-height: 15px; vertical-align: middle; display: inline-block; } .gallery .prev { left: 25px; } .gallery .prev:before { content: "\E03B"; font-size: 15px; line-height: 15px; vertical-align: middle; display: inline-block; } .gallery .prev-node, .gallery .next-node { filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-opacity: 0; -khtml-opacity: 0; -moz-opacity: 0; -ms-opacity: 0; -o-opacity: 0; opacity: 0; } .gallery .prev-node.dragging, .gallery .next-node.dragging { filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; -webkit-opacity: 1; -khtml-opacity: 1; -moz-opacity: 1; -ms-opacity: 1; -o-opacity: 1; opacity: 1; } .gallery .prev-node { transform: translateX(-100%); } .gallery .next-node { transform: translateX(100%); } .gallery .close:before { content: "\E007"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; } .gallery .image-details { position: absolute; bottom: -85px; height: 85px; left: 0; right: 0; -webkit-transition: bottom 333ms ease; -khtml-transition: bottom 333ms ease; -moz-transition: bottom 333ms ease; -ms-transition: bottom 333ms ease; -o-transition: bottom 333ms ease; transition: bottom 333ms ease; } .gallery.details-open .image-details { bottom: 0px; } .gallery .app-content { max-width: none; } .gallery .app-content .node { pointer-events: none; } .gallery .next, .gallery .prev, .gallery .image-head { filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-opacity: 0; -khtml-opacity: 0; -moz-opacity: 0; -ms-opacity: 0; -o-opacity: 0; opacity: 0; -webkit-transition: opacity 333ms ease; -khtml-transition: opacity 333ms ease; -moz-transition: opacity 333ms ease; -ms-transition: opacity 333ms ease; -o-transition: opacity 333ms ease; transition: opacity 333ms ease; } .gallery.chrome-visible .next, .gallery.chrome-visible .prev, .gallery.chrome-visible .image-head { filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; -webkit-opacity: 1; -khtml-opacity: 1; -moz-opacity: 1; -ms-opacity: 1; -o-opacity: 1; opacity: 1; } body.mobile .gallery.chrome-visible .next, body.mobile .gallery.chrome-visible .prev, body.mobile .gallery.chrome-visible .image-head { pointer-events: all; } .node { min-width: 50px; min-height: 50px; } @charset "UTF-8"; /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ .video-node:not(.unpreviewable) .play:hover { -webkit-animation: none 333ms linear infinite; -khtml-animation: none 333ms linear infinite; -moz-animation: none 333ms linear infinite; -ms-animation: none 333ms linear infinite; -o-animation: none 333ms linear infinite; animation: none 333ms linear infinite; } .video-node:not(.unpreviewable) .play:hover { -webkit-animation-name: bounce; -khtml-animation-name: bounce; -moz-animation-name: bounce; -ms-animation-name: bounce; -o-animation-name: bounce; animation-name: bounce; -webkit-animation-duration: 333ms; -khtml-animation-duration: 333ms; -moz-animation-duration: 333ms; -ms-animation-duration: 333ms; -o-animation-duration: 333ms; animation-duration: 333ms; -webkit-animation-timing-function: ease; -khtml-animation-timing-function: ease; -moz-animation-timing-function: ease; -ms-animation-timing-function: ease; -o-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-iteration-count: 1; -khtml-animation-iteration-count: 1; -moz-animation-iteration-count: 1; -ms-animation-iteration-count: 1; -o-animation-iteration-count: 1; animation-iteration-count: 1; } /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins meant to replace the use of z-index completely. These allow developers to focus on the intent of positioning as named layers. Each of these mixins accepts an $adjust value, which is there to allow you to prioritize multiple elements in the same layer. Mixins available: - layer-background Arguments: [$adjust] Adds approprite z-index value for elements that are meant to be below the page's main content - layer-midground Arguments: [$adjust] Adds appropriate z-index value for elements that are the page's primary content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that are meant to be priminent / above the main content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that should appear above everything else (IE - modals) ------------------------------------------------------------- */ .video-node .play:before, .select-mode .video-node:hover .play:before { font-family: "fontIcons"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; text-transform: none; } /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ .video-node:not(.unpreviewable) .play:hover { -webkit-animation: none 333ms linear infinite; -khtml-animation: none 333ms linear infinite; -moz-animation: none 333ms linear infinite; -ms-animation: none 333ms linear infinite; -o-animation: none 333ms linear infinite; animation: none 333ms linear infinite; } .video-node:not(.unpreviewable) .play:hover { -webkit-animation-name: bounce; -khtml-animation-name: bounce; -moz-animation-name: bounce; -ms-animation-name: bounce; -o-animation-name: bounce; animation-name: bounce; -webkit-animation-duration: 333ms; -khtml-animation-duration: 333ms; -moz-animation-duration: 333ms; -ms-animation-duration: 333ms; -o-animation-duration: 333ms; animation-duration: 333ms; -webkit-animation-timing-function: ease; -khtml-animation-timing-function: ease; -moz-animation-timing-function: ease; -ms-animation-timing-function: ease; -o-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-iteration-count: 1; -khtml-animation-iteration-count: 1; -moz-animation-iteration-count: 1; -ms-animation-iteration-count: 1; -o-animation-iteration-count: 1; animation-iteration-count: 1; } /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ .video-node .play, .select-mode .video-node:hover .play { color: #fff; width: 50px; height: 50px; line-height: 52px; text-indent: 4px; text-align: center; position: absolute; left: 50%; top: 50%; margin-top: -24px; margin-left: -24px; border-radius: 50%; z-index: 100; -webkit-animation: bounce 0ms linear 0; -khtml-animation: bounce 0ms linear 0; -moz-animation: bounce 0ms linear 0; -ms-animation: bounce 0ms linear 0; -o-animation: bounce 0ms linear 0; animation: bounce 0ms linear 0; -webkit-transform: scale(1); -khtml-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); background: #232f40; background: rgba(35, 47, 64, 0.15); -webkit-transition: background 333ms ease, transform 333ms ease, color 333ms ease; -khtml-transition: background 333ms ease, transform 333ms ease, color 333ms ease; -moz-transition: background 333ms ease, transform 333ms ease, color 333ms ease; -ms-transition: background 333ms ease, transform 333ms ease, color 333ms ease; -o-transition: background 333ms ease, transform 333ms ease, color 333ms ease; transition: background 333ms ease, transform 333ms ease, color 333ms ease; } .video-node .play:before, .select-mode .video-node:hover .play:before { content: "\E06B"; font-size: 18px; line-height: 18px; vertical-align: middle; display: inline-block; position: absolute; top: 50%; left: 50%; -webkit-transform: translateY(-50%) translateX(-50%); -khtml-transform: translateY(-50%) translateX(-50%); -moz-transform: translateY(-50%) translateX(-50%); -ms-transform: translateY(-50%) translateX(-50%); -o-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); } body.mobile .video-node .play, body.mobile .select-mode .video-node:hover .play { width: 25px; height: 25px; margin-top: -12px; margin-left: -12px; line-height: 25px; text-indent: 2px; } body.mobile .video-node .play:before, body.mobile .select-mode .video-node:hover .play:before { font-size: 10px; } .video-node:not(.unpreviewable) .play { background: #232f40; background: rgba(35, 47, 64, 0.5); } .video-node:not(.unpreviewable) .play:hover { background: #fff; color: #232f40; -webkit-transform: scale(1.2); -khtml-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); } .video-node .duration { color: #fff; font-weight: bold; font-size: 1em; position: absolute; bottom: 10px; right: 10px; text-shadow: -1px 2px 8px #050505; letter-spacing: 0.4px; z-index: 100; } .video-node.image-error .duration { color: #a6aec0; text-shadow: none; } .video-node.image-loading:before { display: none; } @charset "UTF-8"; /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ .airy-play:before, .airy-pause:before, .airy-on:before, .airy-off:before, .airy-fullscreen:before, .airy-normalscreen:before, .airy-skin-beacon.airy.airy-svg div.airy-play-toggle-hint.airy-play-hint:before, .airy-skin-beacon.airy.airy-svg div.airy-replay-hint:before { font-family: "fontIcons"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; text-transform: none; } /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ .airy-skin-beacon.airy.airy-svg .airy-loading-spinner-container div.airy-loading-spinner { background: center center no-repeat; background-size: cover; background-image: url(data:image/png;base64,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); } .airy-player { margin: 0 auto; max-height: 100%; min-width: 320px; box-shadow: 0 0 20px rgba(17, 17, 17, 0.5); } .airy-lightbox { width: 100%; height: 100%; display: flex; align-items: center; } .airy-overlay-gradient { background-color: transparent 80%; background-image: -webkit-gradient(linear, left top, left bottom, from(transparent 80%), to(rgba(0, 0, 0, 0.8))); background-image: -webkit-linear-gradient(top, transparent 80%, rgba(0, 0, 0, 0.8)); background-image: -moz-linear-gradient(top, transparent 80%, rgba(0, 0, 0, 0.8)); background-image: -ms-linear-gradient(top, transparent 80%, rgba(0, 0, 0, 0.8)); background-image: -o-linear-gradient(top, transparent 80%, rgba(0, 0, 0, 0.8)); background-image: linear-gradient(top, transparent 80%, rgba(0, 0, 0, 0.8)); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='transparent 80%', endColorStr='rgba(0, 0, 0, 0.8)'); } .airy-slash:after { content: "/"; padding: 0px 7px; } .airy-play-toggle-hint, .airy-replay-hint { text-align: center !important; border-radius: 50% !important; background: #fff; background: rgba(255, 255, 255, 0.2); } .airy-play, .airy-pause, .airy-on, .airy-replay-hint, .airy-play-toggle-hint, .airy-off, .airy-fullscreen, .airy-normalscreen { background-image: none !important; color: #fff; } .airy-play:hover, .airy-play:focus, .airy-pause:hover, .airy-pause:focus, .airy-on:hover, .airy-on:focus, .airy-replay-hint:hover, .airy-replay-hint:focus, .airy-play-toggle-hint:hover, .airy-play-toggle-hint:focus, .airy-off:hover, .airy-off:focus, .airy-fullscreen:hover, .airy-fullscreen:focus, .airy-normalscreen:hover, .airy-normalscreen:focus { filter: alpha(opacity=50); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; -webkit-opacity: 0.5; -khtml-opacity: 0.5; -moz-opacity: 0.5; -ms-opacity: 0.5; -o-opacity: 0.5; opacity: 0.5; } .airy-skin-beacon.airy.airy-svg .airy-loading-spinner-container div.airy-loading-spinner { background-position: 100%; background-size: cover; } .airy-play:before { content: "\E06B"; font-size: 14px; line-height: 14px; vertical-align: middle; display: inline-block; } .airy-pause:before { content: "\E06A"; font-size: 13px; line-height: 13px; vertical-align: middle; display: inline-block; } .airy-on:before { content: "\E068"; font-size: 13px; line-height: 13px; vertical-align: middle; display: inline-block; padding-top: 2px; } .airy-off:before { content: "\E069"; font-size: 13px; line-height: 13px; vertical-align: middle; display: inline-block; padding-top: 2px; } .airy-fullscreen:before { content: "\E066"; font-size: 13px; line-height: 13px; vertical-align: middle; display: inline-block; line-height: 12px; } .airy-normalscreen:before { content: "\E067"; font-size: 13px; line-height: 13px; vertical-align: middle; display: inline-block; line-height: 12px; } .airy-skin-beacon.airy.airy-svg div.airy-play-toggle-hint.airy-play-hint:before { content: "\E06B"; font-size: 20px; line-height: 20px; vertical-align: middle; display: inline-block; line-height: 53px; } .airy-skin-beacon.airy.airy-svg div.airy-play-toggle-hint.airy-play-hint:hover { filter: alpha(opacity=50); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; -webkit-opacity: 0.5; -khtml-opacity: 0.5; -moz-opacity: 0.5; -ms-opacity: 0.5; -o-opacity: 0.5; opacity: 0.5; } .airy-skin-beacon.airy.airy-svg div.airy-replay-hint:before { content: "\E050"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; font-size: 21px; line-height: 51px; } .airy-skin-beacon.airy div.airy-scalable-hint-container { height: 50px; width: 50px; min-width: 0; } .airy-track-bar-container { margin: 0 !important; transition: 333ms ease; } .airy-progress-bar { cursor: pointer !important; } .airy-scrubber-icon { display: none; } .airy-container-bottom:hover .airy-track-bar-container { -webkit-transform: translate(0px, -6px); -khtml-transform: translate(0px, -6px); -moz-transform: translate(0px, -6px); -ms-transform: translate(0px, -6px); -o-transform: translate(0px, -6px); transform: translate(0px, -6px); } .airy-container-bottom:hover .airy-scrubber-icon { display: inherit; } @charset "UTF-8"; /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ .image-node.placeholder:before, .image-node.image-loading:before { font-family: "fontIcons"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; text-transform: none; } /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ .image-node { position: relative; } .image-node .preload-image { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .image-node img { position: absolute; top: 50%; left: 50%; -webkit-transform: translateY(-50%) translateX(-50%); -khtml-transform: translateY(-50%) translateX(-50%); -moz-transform: translateY(-50%) translateX(-50%); -ms-transform: translateY(-50%) translateX(-50%); -o-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); } .image-node.placeholder:before, .image-node.image-loading:before { content: "\E004"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; color: #cdd2db; position: absolute; top: 50%; left: 50%; -webkit-transform: translateY(-50%) translateX(-50%); -khtml-transform: translateY(-50%) translateX(-50%); -moz-transform: translateY(-50%) translateX(-50%); -ms-transform: translateY(-50%) translateX(-50%); -o-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); } @charset "UTF-8"; /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ .album-node .details .sync-icon:before { font-family: "fontIcons"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; text-transform: none; } /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ .album-node { position: relative; display: inline-block; } .album-node .album-container { position: absolute; top: 4px; right: 4px; bottom: 0; left: 4px; } .album-node .photo-tiles { position: absolute; top: 0; right: 0; bottom: 58px; left: 0; -webkit-transition: top 100ms ease-out, left 100ms ease-out, right 100ms ease-out, bottom 100ms ease-out; -khtml-transition: top 100ms ease-out, left 100ms ease-out, right 100ms ease-out, bottom 100ms ease-out; -moz-transition: top 100ms ease-out, left 100ms ease-out, right 100ms ease-out, bottom 100ms ease-out; -ms-transition: top 100ms ease-out, left 100ms ease-out, right 100ms ease-out, bottom 100ms ease-out; -o-transition: top 100ms ease-out, left 100ms ease-out, right 100ms ease-out, bottom 100ms ease-out; transition: top 100ms ease-out, left 100ms ease-out, right 100ms ease-out, bottom 100ms ease-out; } .album-node .details { text-align: left; position: absolute; bottom: 0; left: 2px; right: 2px; height: 50px; line-height: 1.3em; } .album-node .details .tooltip { position: absolute; } .album-node .details .tooltip .tooltip-body { left: 57px; white-space: nowrap; } .album-node .details .sync-icon { display: inline; margin-right: 5px; vertical-align: 1px; } .album-node .details .sync-icon:before { content: "\E05A"; font-size: 12px; line-height: 12px; vertical-align: middle; display: inline-block; color: #7985a3; } .album-node p, .album-node h5 { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @charset "UTF-8"; /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins meant to replace the use of z-index completely. These allow developers to focus on the intent of positioning as named layers. Each of these mixins accepts an $adjust value, which is there to allow you to prioritize multiple elements in the same layer. Mixins available: - layer-background Arguments: [$adjust] Adds approprite z-index value for elements that are meant to be below the page's main content - layer-midground Arguments: [$adjust] Adds appropriate z-index value for elements that are the page's primary content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that are meant to be priminent / above the main content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that should appear above everything else (IE - modals) ------------------------------------------------------------- */ .photo-tiles.count-0:after { font-family: "fontIcons"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; text-transform: none; } /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ .photo-tiles { position: relative; min-width: 50px; min-height: 50px; } .photo-tiles .tile { position: relative; float: left; width: 100%; height: 100%; } .photo-tiles .image-node { min-height: 0 !important; min-width: 0 !important; position: absolute; top: 2px; bottom: 2px; left: 2px; right: 2px; } .photo-tiles.count-0:before { display: block; content: ''; position: absolute; top: 2px; left: 2px; right: 2px; bottom: 2px; background: #F6F7FD; } .photo-tiles.count-0:after { content: "\E003"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; color: #cdd2db; position: absolute; top: 50%; left: 50%; -webkit-transform: translateY(-50%) translateX(-50%); -khtml-transform: translateY(-50%) translateX(-50%); -moz-transform: translateY(-50%) translateX(-50%); -ms-transform: translateY(-50%) translateX(-50%); -o-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); } .photo-tiles.count-2 .tile { width: 35%; } .photo-tiles.count-2 .tile.tile-1 { width: 65%; } .photo-tiles.count-3 .tile { width: 35%; height: 60%; } .photo-tiles.count-3 .tile.tile-3 { height: 40%; } .photo-tiles.count-3 .tile.tile-1 { width: 65%; height: 100%; } .photo-tiles.count-4 .tile { width: 50%; height: 50%; } .photo-tiles.count-5 .tile { width: 65%; height: 68%; } .photo-tiles.count-5 .tile.tile-2, .photo-tiles.count-5 .tile.tile-3 { width: 35%; height: 34%; } .photo-tiles.count-5 .tile.tile-4 { height: 32%; } .photo-tiles.count-5 .tile.tile-5 { height: 32%; width: 35%; } .photo-tiles .more { position: absolute; z-index: 100; top: 2px; left: 2px; right: 2px; bottom: 2px; color: #fff; font-weight: bold; font-size: 1.2em; background: #232f40; background: rgba(35, 47, 64, 0.5); } .photo-tiles .more:before { content: attr(data-text); position: absolute; top: 50%; left: 50%; -webkit-transform: translateY(-50%) translateX(-50%); -khtml-transform: translateY(-50%) translateX(-50%); -moz-transform: translateY(-50%) translateX(-50%); -ms-transform: translateY(-50%) translateX(-50%); -o-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); } @charset "UTF-8"; /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins meant to replace the use of z-index completely. These allow developers to focus on the intent of positioning as named layers. Each of these mixins accepts an $adjust value, which is there to allow you to prioritize multiple elements in the same layer. Mixins available: - layer-background Arguments: [$adjust] Adds approprite z-index value for elements that are meant to be below the page's main content - layer-midground Arguments: [$adjust] Adds appropriate z-index value for elements that are the page's primary content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that are meant to be priminent / above the main content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that should appear above everything else (IE - modals) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ .tooltip { position: relative; line-height: normal; } .tooltip .tooltip-body { position: absolute; top: -10px; left: 0; padding: 9px 12px; font-size: 12px; transform: translateX(-50%) translateY(-100%); color: #59637a; background: #fff; border: 1px solid rgba(166, 174, 192, 0.7); border-radius: 2px; text-align: center; vertical-align: middle; letter-spacing: 0.34px; box-shadow: 0 4px 9px 0 rgba(0, 0, 0, 0.07); opacity: 0; pointer-events: none; min-width: 150px; -webkit-transition: opacity 333ms; -khtml-transition: opacity 333ms; -moz-transition: opacity 333ms; -ms-transition: opacity 333ms; -o-transition: opacity 333ms; transition: opacity 333ms; z-index: 300; } .tooltip .tooltip-body:before, .tooltip .tooltip-body:after { content: ""; position: absolute; left: 50%; -webkit-transform: translateX(-50%); -khtml-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } .tooltip .tooltip-body:before { top: 100%; border-left: 6px solid transparent; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid rgba(166, 174, 192, 0.7); margin-bottom: -6px; } .tooltip .tooltip-body:after { top: calc(100% - 1px); border-left: 5px solid transparent; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #fff; margin-bottom: -5px; } .tooltip.active .tooltip-body { pointer-events: all; opacity: 1; } @charset "UTF-8"; /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ .live-photo-node { max-height: 100%; max-width: 100%; position: absolute !important; position: absolute; left: 50%; -webkit-transform: translateX(-50%); -khtml-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } .live-photo-node:not(.live-photo-loaded) .lpk-badge { display: none; } @charset "UTF-8"; /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ /* ------------------------------------------------------------- Mixins meant to replace the use of z-index completely. These allow developers to focus on the intent of positioning as named layers. Each of these mixins accepts an $adjust value, which is there to allow you to prioritize multiple elements in the same layer. Mixins available: - layer-background Arguments: [$adjust] Adds approprite z-index value for elements that are meant to be below the page's main content - layer-midground Arguments: [$adjust] Adds appropriate z-index value for elements that are the page's primary content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that are meant to be priminent / above the main content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that should appear above everything else (IE - modals) ------------------------------------------------------------- */ .face-editor .image-node .face-circle .label-face-menu .reassign:before, .face-editor .image-node .face-circle .face-menu .reassign:before, .face-editor .image-node .face-circle .label-face-menu .identify-face:before, .face-editor .image-node .face-circle .face-menu .identify-face:before, .face-editor .image-node .face-circle .label-face-menu .remove:before, .face-editor .image-node .face-circle .face-menu .remove:before, .face-editor .exit-face-editor:before { font-family: "fontIcons"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; text-transform: none; } /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ .face-editor { position: absolute; top: 0; bottom: 0; left: 0; right: 0; overflow: auto; } .face-editor .image-node { position: absolute; top: 50%; left: 50%; -webkit-transform: translateY(-50%) translateX(-50%); -khtml-transform: translateY(-50%) translateX(-50%); -moz-transform: translateY(-50%) translateX(-50%); -ms-transform: translateY(-50%) translateX(-50%); -o-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); max-width: none; max-height: none; -webkit-transition: none; -khtml-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; } .face-editor .image-node .face-circle { position: absolute; border: 2px solid rgba(255, 255, 255, 0.33); border-radius: 50%; z-index: 300; -webkit-transition: z-index 0ms ease 100ms, border 0ms ease 100ms, box-shadow 0ms ease 100ms; -khtml-transition: z-index 0ms ease 100ms, border 0ms ease 100ms, box-shadow 0ms ease 100ms; -moz-transition: z-index 0ms ease 100ms, border 0ms ease 100ms, box-shadow 0ms ease 100ms; -ms-transition: z-index 0ms ease 100ms, border 0ms ease 100ms, box-shadow 0ms ease 100ms; -o-transition: z-index 0ms ease 100ms, border 0ms ease 100ms, box-shadow 0ms ease 100ms; transition: z-index 0ms ease 100ms, border 0ms ease 100ms, box-shadow 0ms ease 100ms; } .face-editor .image-node .face-circle label { position: absolute; top: calc(100% + 10px); background: #fff; padding: 4px 8px; border-radius: 4px; left: 50%; transform: translateX(-50%); opacity: 0; visibility: hidden; -webkit-transition: opacity 333ms ease; -khtml-transition: opacity 333ms ease; -moz-transition: opacity 333ms ease; -ms-transition: opacity 333ms ease; -o-transition: opacity 333ms ease; transition: opacity 333ms ease; } .face-editor .image-node .face-circle label .face-name { max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .face-editor .image-node .face-circle:hover, .face-editor .image-node .face-circle.active { border: 2px solid rgba(255, 255, 255, 0.75); box-shadow: 4px 3px 25px 4px rgba(0, 0, 0, 0.3); } .face-editor .image-node .face-circle:hover label, .face-editor .image-node .face-circle.active label { opacity: 1; visibility: visible; } .face-editor .image-node .face-circle.active { z-index: 301; } .face-editor .image-node .face-circle.active .face-menu, .face-editor .image-node .face-circle.active .label-face-menu { opacity: 1; visibility: visible; } .face-editor .image-node .face-circle:not(.active):hover { z-index: 302; } .face-editor .image-node .face-circle .face-button { width: 100%; height: 100%; border-radius: 50%; } .face-editor .image-node .face-circle .label-face-menu, .face-editor .image-node .face-circle .face-menu { display: inline-block; background: #fff; border: 1px solid #EEE; box-shadow: 0 2px 10px rgba(35, 47, 64, 0.2); border-radius: 2px; padding: 0 8px; white-space: nowrap; opacity: 0; visibility: hidden; -webkit-transition: opacity 333ms ease; -khtml-transition: opacity 333ms ease; -moz-transition: opacity 333ms ease; -ms-transition: opacity 333ms ease; -o-transition: opacity 333ms ease; transition: opacity 333ms ease; } .face-editor .image-node .face-circle .label-face-menu li, .face-editor .image-node .face-circle .face-menu li { padding: .5em; } .face-editor .image-node .face-circle .label-face-menu li + li, .face-editor .image-node .face-circle .face-menu li + li { border-top: 1px solid #bbbbbb; } .face-editor .image-node .face-circle .label-face-menu .reassign:before, .face-editor .image-node .face-circle .face-menu .reassign:before { content: "\E00C"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; } .face-editor .image-node .face-circle .label-face-menu .identify-face:before, .face-editor .image-node .face-circle .face-menu .identify-face:before { content: "\E002"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; } .face-editor .image-node .face-circle .label-face-menu .remove:before, .face-editor .image-node .face-circle .face-menu .remove:before { content: "\E04E"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; } .face-editor .image-node .face-circle .label-face-menu button span, .face-editor .image-node .face-circle .face-menu button span { margin-left: 0.5em; vertical-align: middle; } .face-editor .image-node .face-circle .label-face-menu:before, .face-editor .image-node .face-circle .face-menu:before { border-left: 7px solid transparent; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-right: 7px solid transparent; border-right: 7px solid #fff; margin-left: -7px; content: ''; position: absolute; left: -7px; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -khtml-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .face-editor .image-node .face-circle .label-face-menu { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -khtml-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); left: calc(100% + 10px); } .face-editor .image-node .face-circle .face-menu { left: 100%; margin-left: 10px; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -khtml-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .face-editor .exit-face-editor { position: absolute; top: 25px; right: 25px; color: #fff; width: 40px; height: 40px; border-radius: 50%; background: #050505; background: rgba(5, 5, 5, 0.5); z-index: 200; } .face-editor .exit-face-editor:before { content: "\E070"; font-size: 20px; line-height: 20px; vertical-align: middle; display: inline-block; width: 100%; text-align: center; } .face-editor .exit-face-editor:hover { color: rgba(255, 255, 255, 0.5); } @charset "UTF-8"; /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ .person-picker footer button, .person-picker footer button.secondary { display: inline-block; padding: 0 15px; height: 2.5em; line-height: 2.5em; border-radius: 4px; text-align: center; border: none; font-family: inherit; font-size: inherit; font-weight: bold; letter-spacing: 0.4px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .person-picker footer button:disabled, .person-picker footer button.disabled { cursor: default; } .person-picker footer button + a, .person-picker footer button.secondary + a, .person-picker footer button + button, .person-picker footer button.secondary + button { margin-left: 15px; } .person-picker footer button { background: #FECB88; color: #765627; } .person-picker footer button:enabled:hover { background-color: #F2B769; color: #765627; } .person-picker footer button:enabled:active, .person-picker footer button:enabled.active, .person-picker footer button:enabled:focus { background-color: #ffeacf; color: #765627; } .person-picker footer button:disabled, .person-picker footer button.disabled { background-color: #fee1bb; } .person-picker footer button.secondary { background-color: #7985a3; color: #fff; font-weight: normal; } .person-picker footer button.secondary:enabled:hover { color: #fff; background-color: #637090; } .person-picker footer button.secondary:enabled:focus, .person-picker footer button.secondary:enabled:active, .person-picker footer button.secondary:enabled.active { background-color: #919bb4; color: #fff; } .person-picker footer button.secondary:disabled, .person-picker footer button.disabled.secondary { background-color: #e3e5ec; } /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ .person-picker { width: 440px; } .person-picker.confirm-new-person .dialog-content { height: auto; } .person-picker.confirm-new-person .dialog-content > div { padding: 20px; } .person-picker.confirm-new-person .dialog-content > div input, .person-picker.confirm-new-person .dialog-content > div label { margin-top: 20px; } .person-picker.confirm-new-person .dialog-content > div label { text-align: center; } .person-picker .dialog-content { height: 400px; overflow-y: auto; } .person-picker .list-layout { margin-top: 20px; align-items: start; } .person-picker .list-layout .file-list-node { width: 25%; text-align: center; margin-bottom: 20px; } .person-picker .list-layout .file-list-node label { display: block; margin-top: 4px; cursor: inherit; } .person-picker .list-layout .file-list-node label div, .person-picker .list-layout .file-list-node label span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; white-space: normal; display: block; max-width: 100px; } .person-picker .list-layout .face { display: block; width: 75px; height: 75px; margin: 0 auto; overflow: visible; border-radius: 0; } .person-picker .list-layout .face .preload-image { border-radius: 50%; } .person-picker .list-layout .face .preload-image .bg-image { border-radius: 50%; } .person-picker input[type="text"] { width: 100%; font-size: 1em; padding: 8px; border-radius: 4px; border: solid 1px #bbbbbb; color: #7985a3; } .person-picker .add-person { display: flex; flex-direction: column; align-items: center; } .person-picker .add-person figure { width: 75px; height: 75px; color: #7985a3; background-color: #dee1ea; border-radius: 50%; position: relative; -webkit-transition: color 100ms ease, background-color 100ms ease; -khtml-transition: color 100ms ease, background-color 100ms ease; -moz-transition: color 100ms ease, background-color 100ms ease; -ms-transition: color 100ms ease, background-color 100ms ease; -o-transition: color 100ms ease, background-color 100ms ease; transition: color 100ms ease, background-color 100ms ease; } .person-picker .add-person figure:before, .person-picker .add-person figure:after { content: ''; background: #7985a3; position: absolute; top: 50%; left: 50%; -webkit-transform: translateY(-50%) translateX(-50%); -khtml-transform: translateY(-50%) translateX(-50%); -moz-transform: translateY(-50%) translateX(-50%); -ms-transform: translateY(-50%) translateX(-50%); -o-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); } .person-picker .add-person figure:before { height: 3px; width: 21px; } .person-picker .add-person figure:after { width: 3px; height: 21px; } .person-picker .add-person:hover figure { background-color: #3d7eda; color: #fff; } .person-picker .add-person:hover figure:before, .person-picker .add-person:hover figure:after { background: #fff; } .person-picker .select-person .bg-image:before { content: ''; display: block; position: absolute; height: 100%; width: 100%; border-radius: 50%; border: 0 solid white; box-shadow: 0 0 0 0px #3d7eda; -webkit-transition: border-width 100ms ease, box-shadow 100ms ease; -khtml-transition: border-width 100ms ease, box-shadow 100ms ease; -moz-transition: border-width 100ms ease, box-shadow 100ms ease; -ms-transition: border-width 100ms ease, box-shadow 100ms ease; -o-transition: border-width 100ms ease, box-shadow 100ms ease; transition: border-width 100ms ease, box-shadow 100ms ease; } .person-picker .select-person:hover:not(:disabled) .bg-image:before, .person-picker .select-person.selected .bg-image:before { border-width: 2px; box-shadow: 0 0 0 4px #3d7eda; } .person-picker .select-person label span { color: #b5bccd; } .person-picker footer button { width: 100%; } /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ .list-layout { display: flex; justify-content: space-between; flex-wrap: wrap; } .list-layout .file-list-node { width: calc(33% - 10px); margin-bottom: 15px; } @media screen and (min-width: 701px) and (max-width: 1024px) { .list-layout .file-list-node { width: calc(50% - 10px); } } @media screen and (max-width: 700px) { .list-layout .file-list-node { width: 100%; } } @charset "UTF-8"; /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ /* ------------------------------------------------------------- Mixins meant to replace the use of z-index completely. These allow developers to focus on the intent of positioning as named layers. Each of these mixins accepts an $adjust value, which is there to allow you to prioritize multiple elements in the same layer. Mixins available: - layer-background Arguments: [$adjust] Adds approprite z-index value for elements that are meant to be below the page's main content - layer-midground Arguments: [$adjust] Adds appropriate z-index value for elements that are the page's primary content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that are meant to be priminent / above the main content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that should appear above everything else (IE - modals) ------------------------------------------------------------- */ .image-head .back:before, .image-head .expandable-nav .toggle:before { font-family: "fontIcons"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; text-transform: none; } /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ .image-head { height: 75px; line-height: 75px; position: fixed; text-align: right; top: 0; left: 0; right: 0; z-index: 200; background-color: rgba(5, 5, 5, 0.75); background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(5, 5, 5, 0.75)), to(rgba(5, 5, 5, 0))); background-image: -webkit-linear-gradient(top, rgba(5, 5, 5, 0.75), rgba(5, 5, 5, 0)); background-image: -moz-linear-gradient(top, rgba(5, 5, 5, 0.75), rgba(5, 5, 5, 0)); background-image: -ms-linear-gradient(top, rgba(5, 5, 5, 0.75), rgba(5, 5, 5, 0)); background-image: -o-linear-gradient(top, rgba(5, 5, 5, 0.75), rgba(5, 5, 5, 0)); background-image: linear-gradient(top, rgba(5, 5, 5, 0.75), rgba(5, 5, 5, 0)); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='rgba(5, 5, 5, 0.75)', endColorStr='rgba(5, 5, 5, 0)'); background-color: transparent; } .image-head .back, .image-head .visible-options li button, .image-head .expandable-nav .toggle { pointer-events: auto; color: #fff; text-shadow: 0px 1px 5px rgba(5, 5, 5, 0.5); } .image-head .back:hover, .image-head .visible-options li button:hover, .image-head .expandable-nav .toggle:hover { opacity: 0.5; } .image-head .back { float: left; letter-spacing: 0.4px; } .image-head .back:before { content: "\E007"; font-size: 10px; line-height: 10px; vertical-align: middle; display: inline-block; vertical-align: middle; margin-right: 5px; } .image-head .visible-options { display: inline; } .image-head .visible-options li { display: inline-block; font-size: 1.3em; margin-left: 30px; } .image-head .visible-options li button span { display: none; } .image-head .expandable-nav { display: inline-block; margin-left: 30px; } .image-head .expandable-nav .expanded-nav { top: 60px; } .image-head .expandable-nav .toggle { text-align: center; display: inline-block; } .image-head .expandable-nav .toggle:before { content: "\E045"; font-size: 5px; line-height: 5px; vertical-align: middle; display: inline-block; } @charset "UTF-8"; .node-options > li > button.addPhotos:before, .node-options > li > a.addPhotos:before, .node-options > li > button.addToAlbum:before, .node-options > li > a.addToAlbum:before, .node-options > li > button.addToFamilyArchive:before, .node-options > li > a.addToFamilyArchive:before, .node-options > li > button.removeFromFamilyArchive:before, .node-options > li > a.removeFromFamilyArchive:before, .node-options > li > button.download:before, .node-options > li > a.download:before, .node-options > li > button.faceEdit:before, .node-options > li > a.faceEdit:before, .node-options > li > button.edit:before, .node-options > li > a.edit:before, .node-options > li > button.info:before, .node-options > li > a.info:before, .node-options > li > button.share:before, .node-options > li > a.share:before, .node-options > li > button.rateAlbum:before, .node-options > li > a.rateAlbum:before, .node-options > li > button.removeFromGroup:before, .node-options > li > a.removeFromGroup:before, .node-options > li > button.removeFromAlbum:before, .node-options > li > a.removeFromAlbum:before, .node-options > li > button.trash:before, .node-options > li > a.trash:before, .node-options > li > button.reportAbuse:before, .node-options > li > a.reportAbuse:before, .node-options > li > button.prints:before, .node-options > li > a.prints:before { font-family: "fontIcons"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; text-transform: none; } /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ .node-options { line-height: normal; } .node-options > li { font-size: 1em; } .node-options > li > button.addPhotos:before, .node-options > li > a.addPhotos:before { content: "\E048"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; } .node-options > li > button.addToAlbum:before, .node-options > li > a.addToAlbum:before { content: "\E003"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; } .node-options > li > button.addToFamilyArchive:before, .node-options > li > a.addToFamilyArchive:before { content: "\E022"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; opacity: 0.4; } .node-options > li > button.removeFromFamilyArchive:before, .node-options > li > a.removeFromFamilyArchive:before { content: "\E022"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; } .node-options > li > button.download:before, .node-options > li > a.download:before { content: "\E01A"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; } .node-options > li > button.faceEdit:before, .node-options > li > a.faceEdit:before { content: "\E01C"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; } .node-options > li > button.edit:before, .node-options > li > a.edit:before { content: "\E01D"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; } .node-options > li > button.info:before, .node-options > li > a.info:before { content: "\E03A"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; } .node-options > li > button.share:before, .node-options > li > a.share:before { content: "\E056"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; } .node-options > li > button.rateAlbum:before, .node-options > li > a.rateAlbum:before { content: "\E054"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; } .node-options > li > button.removeFromGroup:before, .node-options > li > a.removeFromGroup:before { content: "\E04D"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; } .node-options > li > button.removeFromAlbum:before, .node-options > li > a.removeFromAlbum:before { content: "\E070"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; } .node-options > li > button.trash:before, .node-options > li > a.trash:before { content: "\E015"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; } .node-options > li > button.reportAbuse:before, .node-options > li > a.reportAbuse:before { content: "\E031"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; } .node-options > li > button.prints:before, .node-options > li > a.prints:before { content: "\E04B"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; } .node-options > li > button:before, .node-options > li > a:before { vertical-align: middle; } .node-options > li > button .label, .node-options > li > a .label { margin-left: 8px; } @charset "UTF-8"; /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ .share-dialog .dialog-head:before, .share-dialog .share-options .share-box.email:before, .share-dialog .share-options .share-box.facebook:before, .share-dialog .share-options .share-box.twitter:before, .share-dialog .share-options .share-box.link:before { font-family: "fontIcons"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; text-transform: none; } /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins meant to replace the use of z-index completely. These allow developers to focus on the intent of positioning as named layers. Each of these mixins accepts an $adjust value, which is there to allow you to prioritize multiple elements in the same layer. Mixins available: - layer-background Arguments: [$adjust] Adds approprite z-index value for elements that are meant to be below the page's main content - layer-midground Arguments: [$adjust] Adds appropriate z-index value for elements that are the page's primary content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that are meant to be priminent / above the main content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that should appear above everything else (IE - modals) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ .share-dialog .dialog-head:before, .share-dialog .share-options .share-box.email:before, .share-dialog .share-options .share-box.facebook:before, .share-dialog .share-options .share-box.twitter:before, .share-dialog .share-options .share-box.link:before { font-family: "fontIcons"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; text-transform: none; } /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ .share-dialog { text-align: center; width: 500px; } @media screen and (max-width: 700px) { .share-dialog { width: 400px; } } .share-dialog .dialog-head:before { content: "\E057"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; } .share-dialog .dialog-content { padding-bottom: 0; overflow: visible; } .share-dialog .share-content .unpreviewable .filename { left: 0; } .share-dialog footer { padding-top: 35px; padding-bottom: 20px; } .share-dialog footer h5 { text-align: left; margin: 0 0 10px 0; font-size: 0.8em; } .share-dialog .share-options { position: relative; box-shadow: inset 0 0 0 1px #7985a3; border-radius: 5px; overflow: hidden; background: #fff; top: 20px; z-index: 200; } .share-dialog .share-options .column-size { display: block; } .share-dialog .share-options .column:first-child .share-box { border-radius: 3px 0 0 3px; } .share-dialog .share-options .column:last-child .share-box { border-radius: 0 3px 3px 0; } .share-dialog .share-options .share-box { display: block; text-align: center; white-space: nowrap; width: 100%; height: 40px; line-height: 40px; } .share-dialog .share-options .share-box.active { background: #7985a3; color: #fff; } .share-dialog .share-options .share-box.email:before { content: "\E01E"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; } .share-dialog .share-options .share-box.facebook:before { content: "\E020"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; } .share-dialog .share-options .share-box.twitter:before { content: "\E05C"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; } .share-dialog .share-options .share-box.link:before { content: "\E03D"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; } .share-dialog .share-options .share-box span { margin-left: 10px; } @media screen and (max-width: 700px) { .share-dialog .share-options .share-box span { display: none; } } .share-dialog .share-disclaimer { font-size: .9em; line-height: 1.6em; margin: 15px 0 0 0; } .share-dialog .share-disclaimer .cp-shared { color: #3a89f6; } .share-dialog .album-node, .share-dialog .photo-tiles-container { width: 100%; position: relative; position: relative; } .share-dialog .album-node:before, .share-dialog .photo-tiles-container:before { content: ''; display: block; padding-top: 75%; } .share-dialog .photo-tiles-container .photo-tiles { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .share-dialog .loading-container { position: relative; height: 25px; } .share-dialog .loading-container .loading { position: static; margin: 0 auto; height: 25px; width: 25px; } .share-dialog .get-link { width: 100%; } .share-dialog .twitter-share, .share-dialog .facebook-share, .share-dialog .fb-connect { width: 100%; } .share-dialog .email-share { width: 100%; } .copy-input-wrapper .copy-input { font-size: 12px; border: 1px solid #EEE; padding: 5px 10px; display: inline-block; background: #fff; border-radius: 5px; box-shadow: inset 0px 2px 0px 0px rgba(0, 0, 0, 0.05); outline: none; } .copy-input-wrapper { display: flex; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; text-align: left; } .copy-input-wrapper .copy-input { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex: 1 auto; -webkit-flex: 1 auto; -ms-flex: 1 auto; vertical-align: middle; text-align: center; width: auto; height: 2.5em; font-size: 1em; } .copy-input-wrapper .copy-input.button-visible { text-align: left; border-top-right-radius: 0; border-bottom-right-radius: 0; } .copy-input-wrapper .copy-button { vertical-align: middle; border-top-left-radius: 0; border-bottom-left-radius: 0; } @charset "UTF-8"; /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ .dialog.group-share-dialog.groups .dialog-content .empty-state .create-group, .dialog.group-share-dialog .add-to-family, .dialog.group-share-dialog .group-share-options .share, .dialog.group-share-dialog.groups .dialog-content .create-group { display: inline-block; padding: 0 15px; height: 2.5em; line-height: 2.5em; border-radius: 4px; text-align: center; border: none; font-family: inherit; font-size: inherit; font-weight: bold; letter-spacing: 0.4px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dialog.group-share-dialog .add-to-family:disabled, .dialog.group-share-dialog .group-share-options .share:disabled, .dialog.group-share-dialog.groups .dialog-content .create-group:disabled, .dialog.group-share-dialog .disabled.add-to-family, .dialog.group-share-dialog .group-share-options .disabled.share, .dialog.group-share-dialog.groups .dialog-content .disabled.create-group { cursor: default; } .dialog.group-share-dialog.groups .dialog-content .empty-state .create-group + a, .dialog.group-share-dialog .add-to-family + a, .dialog.group-share-dialog .group-share-options .share + a, .dialog.group-share-dialog.groups .dialog-content .create-group + a, .dialog.group-share-dialog.groups .dialog-content .empty-state .create-group + button, .dialog.group-share-dialog .add-to-family + button, .dialog.group-share-dialog .group-share-options .share + button, .dialog.group-share-dialog.groups .dialog-content .create-group + button { margin-left: 15px; } .dialog.group-share-dialog.groups .dialog-content .empty-state .create-group, .dialog.group-share-dialog .add-to-family, .dialog.group-share-dialog .group-share-options .share { background: #FECB88; color: #765627; } .dialog.group-share-dialog.groups .dialog-content .empty-state .create-group:enabled:hover, .dialog.group-share-dialog .add-to-family:enabled:hover, .dialog.group-share-dialog .group-share-options .share:enabled:hover { background-color: #F2B769; color: #765627; } .dialog.group-share-dialog.groups .dialog-content .empty-state .create-group:enabled:active, .dialog.group-share-dialog .add-to-family:enabled:active, .dialog.group-share-dialog .group-share-options .share:enabled:active, .dialog.group-share-dialog.groups .dialog-content .empty-state .create-group:enabled.active, .dialog.group-share-dialog .add-to-family:enabled.active, .dialog.group-share-dialog .group-share-options .share:enabled.active, .dialog.group-share-dialog.groups .dialog-content .empty-state .create-group:enabled:focus, .dialog.group-share-dialog .add-to-family:enabled:focus, .dialog.group-share-dialog .group-share-options .share:enabled:focus { background-color: #ffeacf; color: #765627; } .dialog.group-share-dialog.groups .dialog-content .empty-state .create-group:disabled, .dialog.group-share-dialog .add-to-family:disabled, .dialog.group-share-dialog .group-share-options .share:disabled, .dialog.group-share-dialog.groups .dialog-content .empty-state .disabled.create-group, .dialog.group-share-dialog .disabled.add-to-family, .dialog.group-share-dialog .group-share-options .disabled.share { background-color: #fee1bb; } .dialog.group-share-dialog.groups .dialog-content .empty-state .secondary.create-group, .dialog.group-share-dialog .secondary.add-to-family, .dialog.group-share-dialog .group-share-options .secondary.share { background-color: #7985a3; color: #fff; font-weight: normal; } .dialog.group-share-dialog.groups .dialog-content .empty-state .secondary.create-group:enabled:hover, .dialog.group-share-dialog .secondary.add-to-family:enabled:hover, .dialog.group-share-dialog .group-share-options .secondary.share:enabled:hover { color: #fff; background-color: #637090; } .dialog.group-share-dialog.groups .dialog-content .empty-state .secondary.create-group:enabled:focus, .dialog.group-share-dialog .secondary.add-to-family:enabled:focus, .dialog.group-share-dialog .group-share-options .secondary.share:enabled:focus, .dialog.group-share-dialog.groups .dialog-content .empty-state .secondary.create-group:enabled:active, .dialog.group-share-dialog .secondary.add-to-family:enabled:active, .dialog.group-share-dialog .group-share-options .secondary.share:enabled:active, .dialog.group-share-dialog.groups .dialog-content .empty-state .secondary.create-group:enabled.active, .dialog.group-share-dialog .secondary.add-to-family:enabled.active, .dialog.group-share-dialog .group-share-options .secondary.share:enabled.active { background-color: #919bb4; color: #fff; } .dialog.group-share-dialog.groups .dialog-content .empty-state .secondary.create-group:disabled, .dialog.group-share-dialog .secondary.add-to-family:disabled, .dialog.group-share-dialog .group-share-options .secondary.share:disabled, .dialog.group-share-dialog.groups .dialog-content .empty-state .disabled.secondary.create-group, .dialog.group-share-dialog .disabled.secondary.add-to-family, .dialog.group-share-dialog .group-share-options .disabled.secondary.share { background-color: #e3e5ec; } .dialog.group-share-dialog.groups .dialog-content .create-group { background: none; color: inherit; } .dialog.group-share-dialog.groups .dialog-content .create-group:enabled:hover, .dialog.group-share-dialog.groups .dialog-content .create-group:enabled:focus, .dialog.group-share-dialog.groups .dialog-content .create-group:enabled:active, .dialog.group-share-dialog.groups .dialog-content .create-group:enabled.active { color: inherit; background: none; } .dialog.group-share-dialog .share-sections button.share-groups:before, .dialog.group-share-dialog .share-sections button.share-link:before, .dialog.group-share-dialog .share-sections button.share-family:before, .dialog.group-share-dialog .share-sections button.share-email:before, .dialog.group-share-dialog .share-sections button.share-facebook:before, .dialog.group-share-dialog.groups .dialog-content .create-group:before, .dialog.group-share-dialog .dialog-head:before { font-family: "fontIcons"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; text-transform: none; } /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins meant to replace the use of z-index completely. These allow developers to focus on the intent of positioning as named layers. Each of these mixins accepts an $adjust value, which is there to allow you to prioritize multiple elements in the same layer. Mixins available: - layer-background Arguments: [$adjust] Adds approprite z-index value for elements that are meant to be below the page's main content - layer-midground Arguments: [$adjust] Adds appropriate z-index value for elements that are the page's primary content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that are meant to be priminent / above the main content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that should appear above everything else (IE - modals) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ .dialog.group-share-dialog .share-sections button.share-groups:before, .dialog.group-share-dialog .share-sections button.share-link:before, .dialog.group-share-dialog .share-sections button.share-family:before, .dialog.group-share-dialog .share-sections button.share-email:before, .dialog.group-share-dialog .share-sections button.share-facebook:before, .dialog.group-share-dialog.groups .dialog-content .create-group:before, .dialog.group-share-dialog .dialog-head:before { font-family: "fontIcons"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; text-transform: none; } /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ .dialog.group-share-dialog { width: 500px; } .dialog.group-share-dialog footer { padding: 0; } .dialog.group-share-dialog .dialog-content { overflow: hidden; padding: 20px; } .dialog.group-share-dialog .dialog-content .photo-tiles { padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid #EEE; } .dialog.group-share-dialog .share-sections { display: flex; } .dialog.group-share-dialog .share-sections li { padding: 15px; white-space: nowrap; position: relative; border: solid rgba(5, 5, 5, 0); border-width: 0 1px; flex-basis: 100%; flex-shrink: 1; } .dialog.group-share-dialog .share-sections li.active { border-color: #EEE; background: #fff; box-shadow: 0 0 10px rgba(5, 5, 5, 0.05); } @media screen and (max-width: 700px) { .dialog.group-share-dialog .share-sections li { padding: 10px; } } .dialog.group-share-dialog .share-sections button:before { display: block !important; margin-bottom: 10px; } @media screen and (max-width: 700px) { .dialog.group-share-dialog .share-sections button { font-size: 0.75em; white-space: wrap; } .dialog.group-share-dialog .share-sections button:before { font-size: 16px !important; line-height: 16px !important; } } .dialog.group-share-dialog .share-sections button.share-groups:before { content: "\E035"; font-size: 24px; line-height: 24px; vertical-align: middle; display: inline-block; } .dialog.group-share-dialog .share-sections button.share-link:before { content: "\E03D"; font-size: 24px; line-height: 24px; vertical-align: middle; display: inline-block; } .dialog.group-share-dialog .share-sections button.share-family:before { content: "\E022"; font-size: 24px; line-height: 24px; vertical-align: middle; display: inline-block; } .dialog.group-share-dialog .share-sections button.share-email:before { content: "\E01E"; font-size: 24px; line-height: 24px; vertical-align: middle; display: inline-block; } .dialog.group-share-dialog .share-sections button.share-facebook:before { content: "\E020"; font-size: 24px; line-height: 24px; vertical-align: middle; display: inline-block; } .dialog.group-share-dialog.groups .dialog-content { padding: 0; } .dialog.group-share-dialog.groups .dialog-content .create-group { font-weight: normal; width: 100%; } .dialog.group-share-dialog.groups .dialog-content .create-group:before { content: "\E035"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; margin-right: 10px; color: #3d7eda; } .dialog.group-share-dialog.groups .dialog-content .empty-state .create-group { width: auto; } .dialog.group-share-dialog.groups .dialog-content .empty-state .create-group:before { color: inherit; } .dialog.group-share-dialog.groups .dialog-content .scroller { padding: 20px; height: 350px; } .dialog.group-share-dialog .dialog-head:before { content: "\E056"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; } .dialog.group-share-dialog .infinite-scroll-list { top: 0; } .dialog.group-share-dialog .list-layout .file-list-node { width: 100%; flex-shrink: 0; border-top: 1px solid #EEE; padding-top: 15px; margin: 15px 0 0 0; display: flex; align-items: center; } .dialog.group-share-dialog .list-layout .file-list-node .fancy-checkbox { flex-shrink: 0; } .dialog.group-share-dialog .list-layout .file-list-node .node { min-height: 0; } .dialog.group-share-dialog .list-layout .file-list-node .cover { border-radius: 4px; overflow: hidden; width: 65px; margin-right: 15px; flex-shrink: 0; } .dialog.group-share-dialog .list-layout .file-list-node .details { flex-grow: 1; text-align: left; height: auto; margin: 0; overflow: hidden; } .dialog.group-share-dialog .list-layout .file-list-node .counts { display: none; } .dialog.group-share-dialog .list-layout .file-list-node .unpreviewable .content { width: auto; height: auto; line-height: normal; } .dialog.group-share-dialog .add-to-family { width: 100%; } .dialog.group-share-dialog .group-share-options { padding: 20px; border-top: 1px solid #EEE; box-shadow: 0 0 10px rgba(5, 5, 5, 0.1); } .dialog.group-share-dialog .group-share-options .share { width: 100%; } .dialog.group-share-dialog .group-share-options .cancel, .dialog.group-share-dialog .group-share-options .share { flex-basis: 100%; flex-grow: 1; flex-shrink: 1; } .infinite-scroll-list { position: relative; } .infinite-scroll-list .page { position: absolute; width: 100%; } .scroller { overflow-y: auto; overflow-x: hidden; } @charset "UTF-8"; .fancy-checkbox:before { font-family: "fontIcons"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; text-transform: none; } /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ .fancy-checkbox { display: inline-block; cursor: pointer; color: #fff; background: #fff; width: 12px; height: 12px; line-height: 11px; border-radius: 2px; box-shadow: 0 0 0 1px #bbc1d0; text-align: center; overflow: hidden; font-weight: 900; } .fancy-checkbox:enabled:active, .fancy-checkbox:enabled:hover { color: #fff; } .fancy-checkbox:enabled:focus { outline: 0; } .fancy-checkbox:before { content: "\E00D"; font-size: 8px; line-height: 8px; vertical-align: middle; display: inline-block; } .fancy-checkbox.checked { background: #7985a3; box-shadow: 0 0 0 1px #7985a3; } .dialog.join-group { width: 420px; } .dialog.join-group .cover { display: none; } .dialog.join-group .details { height: auto; margin: 0; } .dialog.join-group h3 { margin-bottom: 15px; font-size: 1.2em; font-weight: bold; } .dialog.join-group p { margin-top: 15px; } .dialog.join-group .options { display: flex; flex-wrap: nowrap; } .dialog.join-group .options button { flex-shrink: 1; flex-grow: 1; flex-basis: 50%; } .dialog.join-group .notification-confirm { text-align: left; margin: 0 30px; display: flex; } .dialog.join-group .notification-confirm .fancy-checkbox { margin-right: 10px; margin-top: 5px; flex-shrink: 0; } .dialog.join-group .notification-confirm span { flex-grow: 1; } @charset "UTF-8"; /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ /* ------------------------------------------------------------- Mixins meant to replace the use of z-index completely. These allow developers to focus on the intent of positioning as named layers. Each of these mixins accepts an $adjust value, which is there to allow you to prioritize multiple elements in the same layer. Mixins available: - layer-background Arguments: [$adjust] Adds approprite z-index value for elements that are meant to be below the page's main content - layer-midground Arguments: [$adjust] Adds appropriate z-index value for elements that are the page's primary content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that are meant to be priminent / above the main content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that should appear above everything else (IE - modals) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ .group-node { line-height: 1.2em; } .group-node .details { height: 60px; margin-top: 8px; } .group-node.hide-details .details { display: none; } .group-node h3 { font-weight: bold; font-size: 1.1em; color: #7985a3; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .group-node h4 { font-size: 1em; font-weight: normal; margin: 5px 0 0 0; color: #999; } .group-node .cover { width: 100%; position: relative; } .group-node .cover:before { content: ''; display: block; padding-top: 65%; } .group-node .cover .node { background: #F6F7FD; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .group-node .cover .node.unpreviewable { background-image: url(https://m.media-amazon.com/images/G/01/digital/photos/group-coverphoto.jpg); background-size: cover; background-position: top center; } .group-node .cover .node.unpreviewable * { display: none; } .group-node ul.counts li { display: inline; line-height: 18px; margin-top: 5px; } .group-node ul.counts li:not(:last-child):after { content: ', '; } .group-node ul.counts li.unread { margin-right: 5px; } .group-node ul.counts li.unread:after { display: none; } .group-node ul.members { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .group-node ul.members li { display: inline; } .group-node ul.members li:after { content: ', '; } .group-node ul.members li:last-child:after, .group-node ul.members.extra li:nth-last-child(2):after { content: ' '; } .group-node ul.avatars { position: relative; margin-top: -17px; margin-left: -2px; z-index: 101; } .group-node ul.avatars li { width: 26px; height: 34px; display: inline-block; position: relative; } .group-node ul.avatars li:nth-child(1) { z-index: 99; } .group-node ul.avatars li:nth-child(2) { z-index: 98; } .group-node ul.avatars li:nth-child(3) { z-index: 97; } .group-node ul.avatars li:nth-child(4) { z-index: 96; } .group-node ul.avatars li:nth-child(5) { z-index: 95; } .group-node ul.avatars li:nth-child(6) { z-index: 94; } .group-node .customer-avatar, .group-node .add-members { border: 2px solid #fff; background: #fff; border-radius: 50%; overflow: hidden; width: 34px; height: 34px; min-width: 0; min-height: 0; display: inline-block; vertical-align: top; } .group-node .add-members { background: #F6F7FD; position: relative; } .group-node .add-members:hover { background: #e1e4f8; } .group-node .add-members .icon:before, .group-node .add-members .icon:after { position: absolute; content: ''; background: #999; border-radius: 2px; position: absolute; top: 50%; left: 50%; -webkit-transform: translateY(-50%) translateX(-50%); -khtml-transform: translateY(-50%) translateX(-50%); -moz-transform: translateY(-50%) translateX(-50%); -ms-transform: translateY(-50%) translateX(-50%); -o-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); } .group-node .add-members .icon:before { width: 30%; height: 5%; } .group-node .add-members .icon:after { width: 5%; height: 30%; } .count-badge { display: inline-block; text-transform: uppercase; color: #fff; background: #3d7eda; border-radius: 10px; font-size: 0.8em; line-height: 1.6em; padding: 0 5px; } @charset "UTF-8"; .dialog.invite-to-group button.get-link { display: inline-block; padding: 0 15px; height: 2.5em; line-height: 2.5em; border-radius: 4px; text-align: center; border: none; font-family: inherit; font-size: inherit; font-weight: bold; letter-spacing: 0.4px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dialog.invite-to-group button.get-link:disabled, .dialog.invite-to-group button.disabled.get-link { cursor: default; } .dialog.invite-to-group button.get-link + a, .dialog.invite-to-group button.get-link + button { margin-left: 15px; } .dialog.invite-to-group button.get-link { background: #FECB88; color: #765627; } .dialog.invite-to-group button.get-link:enabled:hover { background-color: #F2B769; color: #765627; } .dialog.invite-to-group button.get-link:enabled:active, .dialog.invite-to-group button.get-link:enabled.active, .dialog.invite-to-group button.get-link:enabled:focus { background-color: #ffeacf; color: #765627; } .dialog.invite-to-group button.get-link:disabled, .dialog.invite-to-group button.disabled.get-link { background-color: #fee1bb; } .dialog.invite-to-group button.secondary.get-link { background-color: #7985a3; color: #fff; font-weight: normal; } .dialog.invite-to-group button.secondary.get-link:enabled:hover { color: #fff; background-color: #637090; } .dialog.invite-to-group button.secondary.get-link:enabled:focus, .dialog.invite-to-group button.secondary.get-link:enabled:active, .dialog.invite-to-group button.secondary.get-link:enabled.active { background-color: #919bb4; color: #fff; } .dialog.invite-to-group button.secondary.get-link:disabled, .dialog.invite-to-group button.disabled.secondary.get-link { background-color: #e3e5ec; } .dialog.invite-to-group .toggle-component button.link-tab:before, .dialog.invite-to-group .toggle-component button.email-tab:before { font-family: "fontIcons"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; text-transform: none; } /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ .dialog.invite-to-group { width: 400px; text-align: center; } .dialog.invite-to-group h2 { font-size: 1.2em; font-weight: bold; } .dialog.invite-to-group p { margin-top: 15px; margin-bottom: 0; } .dialog.invite-to-group .dialog-content { overflow: visible; } .dialog.invite-to-group .toggle-component { margin: 15px 0; border: none; box-shadow: inset 0 0 0 1px #7985a3; } .dialog.invite-to-group .toggle-component button.active { background: #7985a3; } .dialog.invite-to-group .toggle-component button:before { margin-right: 10px; } .dialog.invite-to-group .toggle-component button.link-tab:before { content: "\E03D"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; } .dialog.invite-to-group .toggle-component button.email-tab:before { content: "\E01E"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; } .dialog.invite-to-group section.content { display: flex; } .dialog.invite-to-group button.get-link { flex-basis: 100%; } .dialog.invite-to-group .copy-input-wrapper { width: 100%; } .dialog.invite-to-group .loading-container { margin: 15px; height: 50px; position: relative; } .dialog.invite-to-group .loading-container .loading { position: absolute; } .email-client-selector button.open-email { display: inline-block; padding: 0 15px; height: 2.5em; line-height: 2.5em; border-radius: 4px; text-align: center; border: none; font-family: inherit; font-size: inherit; font-weight: bold; letter-spacing: 0.4px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .email-client-selector button.open-email:disabled, .email-client-selector button.disabled.open-email { cursor: default; } .email-client-selector button.open-email + a, .email-client-selector button.open-email + button { margin-left: 15px; } .email-client-selector button.open-email { background: #FECB88; color: #765627; } .email-client-selector button.open-email:enabled:hover { background-color: #F2B769; color: #765627; } .email-client-selector button.open-email:enabled:active, .email-client-selector button.open-email:enabled.active, .email-client-selector button.open-email:enabled:focus { background-color: #ffeacf; color: #765627; } .email-client-selector button.open-email:disabled, .email-client-selector button.disabled.open-email { background-color: #fee1bb; } .email-client-selector button.secondary.open-email { background-color: #7985a3; color: #fff; font-weight: normal; } .email-client-selector button.secondary.open-email:enabled:hover { color: #fff; background-color: #637090; } .email-client-selector button.secondary.open-email:enabled:focus, .email-client-selector button.secondary.open-email:enabled:active, .email-client-selector button.secondary.open-email:enabled.active { background-color: #919bb4; color: #fff; } .email-client-selector button.secondary.open-email:disabled, .email-client-selector button.disabled.secondary.open-email { background-color: #e3e5ec; } /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ .email-client-selector { display: flex; flex-wrap: nowrap; justify-content: space-between; width: 100%; } .email-client-selector .fancy-selector { flex-shrink: 1; vertical-align: middle; } .email-client-selector button.open-email { flex-grow: 1; flex-basis: 100%; margin-left: 15px; vertical-align: middle; } .email-client-selector .expandable-nav .toggle { height: 35px; } .email-client-selector .expandable-nav button { color: #7985a3; } .email-client-selector .expandable-nav button:hover { color: #3d7eda; } @media screen and (max-width: 700px) { .email-client-selector { flex-direction: column; } .email-client-selector button.open-email { margin: 0; } .email-client-selector .fancy-selector { flex-basis: 100%; margin-bottom: 15px; } } @charset "UTF-8"; /* ------------------------------------------------------------- Mixins meant to replace the use of z-index completely. These allow developers to focus on the intent of positioning as named layers. Each of these mixins accepts an $adjust value, which is there to allow you to prioritize multiple elements in the same layer. Mixins available: - layer-background Arguments: [$adjust] Adds approprite z-index value for elements that are meant to be below the page's main content - layer-midground Arguments: [$adjust] Adds appropriate z-index value for elements that are the page's primary content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that are meant to be priminent / above the main content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that should appear above everything else (IE - modals) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ .fancy-selector:after { font-family: "fontIcons"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; text-transform: none; } /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ .fancy-selector { display: inline-block; position: relative; } .fancy-selector select, .fancy-selector .toggle { font-size: inherit; line-height: inherit; -webkit-appearance: none; background: #fff; width: 100%; display: inline-block; vertical-align: middle; border: 1px solid #EEE; padding: 5px 20px 5px 10px; border-radius: 4px; box-shadow: 0 0 4px rgba(5, 5, 5, 0.1); position: relative; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fancy-selector:after { content: "\E00E"; font-size: 5px; line-height: 5px; vertical-align: middle; display: inline-block; pointer-events: none; font-weight: normal; right: 10px; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -khtml-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .fancy-selector.disabled .toggle { opacity: 0.5; cursor: initial; } .fancy-selector .expandable-nav { width: 100%; } .fancy-selector .expandable-nav .expanded-nav { margin-top: 10px; padding: 0; width: 100%; } .fancy-selector ul { border-radius: 4px; padding: 15px; max-height: 300px; overflow-y: auto; position: relative; z-index: 100; } @media screen and (min-width: 701px) { .fancy-selector select { display: none; } } @media screen and (max-width: 700px) { .fancy-selector .expandable-nav { display: none; } } @charset "UTF-8"; /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ /* ------------------------------------------------------------- Mixins meant to replace the use of z-index completely. These allow developers to focus on the intent of positioning as named layers. Each of these mixins accepts an $adjust value, which is there to allow you to prioritize multiple elements in the same layer. Mixins available: - layer-background Arguments: [$adjust] Adds approprite z-index value for elements that are meant to be below the page's main content - layer-midground Arguments: [$adjust] Adds appropriate z-index value for elements that are the page's primary content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that are meant to be priminent / above the main content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that should appear above everything else (IE - modals) ------------------------------------------------------------- */ /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ .toggle-component { max-width: 400px; margin: 0 auto; border: 1px solid #EEE; border-radius: 5px; overflow: hidden; } body.mobile .toggle-component { font-size: 0.7em; } .toggle-component button { padding: 12px 15px; display: inline-block; vertical-align: middle; width: 50%; text-align: center; font-weight: bold; } .toggle-component button.active { background: #3d7eda; color: #fff; } .toggle-component button.active:hover { color: #fff; } .dialog.create-group input { font-size: 12px; border: 1px solid #EEE; padding: 5px 10px; display: inline-block; background: #fff; border-radius: 5px; box-shadow: inset 0px 2px 0px 0px rgba(0, 0, 0, 0.05); outline: none; } .dialog.create-group .dialog-content { overflow: visible; } .dialog.create-group svg { width: 155px; } .dialog.create-group figure { text-align: center; margin-top: -70px; margin-bottom: 15px; } .dialog.create-group h1 { font-size: 1.8em; color: #47A7BC; } .dialog.create-group p { color: #a6aec0; } .dialog.create-group label { text-align: left; } .dialog.create-group h2 { font-weight: bold; font-size: 1em; } .dialog.create-group input { width: 100%; border-color: #cdd2db; } .dialog.create-group footer .options { display: flex; } .dialog.create-group footer .options button { flex-grow: 1; flex-shrink: 1; flex-basis: 50%; } @charset "UTF-8"; /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ .empty-state.groups button, .empty-state.groups button.add-content { display: inline-block; padding: 0 15px; height: 2.5em; line-height: 2.5em; border-radius: 4px; text-align: center; border: none; font-family: inherit; font-size: inherit; font-weight: bold; letter-spacing: 0.4px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .empty-state.groups button:disabled, .empty-state.groups button.disabled { cursor: default; } .empty-state.groups button + a, .empty-state.groups button.add-content + a, .empty-state.groups button + button, .empty-state.groups button.add-content + button { margin-left: 15px; } .empty-state.groups button { background: #FECB88; color: #765627; } .empty-state.groups button:enabled:hover { background-color: #F2B769; color: #765627; } .empty-state.groups button:enabled:active, .empty-state.groups button:enabled.active, .empty-state.groups button:enabled:focus { background-color: #ffeacf; color: #765627; } .empty-state.groups button:disabled, .empty-state.groups button.disabled { background-color: #fee1bb; } .empty-state.groups button.secondary, .empty-state.groups button.add-content { background-color: #7985a3; color: #fff; font-weight: normal; } .empty-state.groups button.secondary:enabled:hover, .empty-state.groups button.add-content:enabled:hover { color: #fff; background-color: #637090; } .empty-state.groups button.secondary:enabled:focus, .empty-state.groups button.add-content:enabled:focus, .empty-state.groups button.secondary:enabled:active, .empty-state.groups button.add-content:enabled:active, .empty-state.groups button.secondary:enabled.active, .empty-state.groups button.add-content:enabled.active { background-color: #919bb4; color: #fff; } .empty-state.groups button.secondary:disabled, .empty-state.groups button.add-content:disabled, .empty-state.groups button.disabled.secondary, .empty-state.groups button.disabled.add-content { background-color: #e3e5ec; } .empty-state.groups .scene.photos { margin: 35px auto; max-width: 231px; } .empty-state.groups .scene.photos path.st5 { display: none !important; } .empty-state.groups .scene.empty { margin: 35px auto; max-width: 184px; } .empty-state.groups .scene.groups, .empty-state.groups .scene.groups-share { background: url(https://m.media-amazon.com/images/G/01/digital/photos/groups-empty._V515107962_.png) center center no-repeat; max-width: 374px; background-size: 100%; margin-bottom: 15px; position: relative; } .empty-state.groups .scene.groups:before, .empty-state.groups .scene.groups-share:before { content: ''; display: block; padding-top: 67%; } .empty-state.groups .scene.groups-share { max-width: 187px; margin-top: 0; } .empty-state.groups button { padding: 0 25px; } .empty-state.groups button.add-content { padding: 0 25px; } .empty-state.groups button.add-content, .empty-state.groups button.add-people { min-width: 180px; } .empty-state.groups h3 { margin-top: 15px; } @charset "UTF-8"; /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ .empty-state .sms-notification input[type=tel] { font-size: 12px; border: 1px solid #EEE; padding: 5px 10px; display: inline-block; background: #fff; border-radius: 5px; box-shadow: inset 0px 2px 0px 0px rgba(0, 0, 0, 0.05); outline: none; } /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ /* ------------------------------------------------------------- Mixins meant to replace the use of z-index completely. These allow developers to focus on the intent of positioning as named layers. Each of these mixins accepts an $adjust value, which is there to allow you to prioritize multiple elements in the same layer. Mixins available: - layer-background Arguments: [$adjust] Adds approprite z-index value for elements that are meant to be below the page's main content - layer-midground Arguments: [$adjust] Adds appropriate z-index value for elements that are the page's primary content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that are meant to be priminent / above the main content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that should appear above everything else (IE - modals) ------------------------------------------------------------- */ .empty-state .download-apps ul li a:before { font-family: "fontIcons"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; text-transform: none; } /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ .empty-state { text-align: center; padding: 15px 40px; } body.mobile .empty-state { padding: 0; } .empty-state p { font-size: 1em; color: #999; margin: 0 auto 25px auto; max-width: 550px; } .empty-state hr { border: 1px solid #EEE; width: 100%; margin: 35px auto 24px; } .empty-state button { margin: 7.5px; } .empty-state button.learn-more { margin: 0; } .empty-state .scene { display: block; width: 100%; background: 0 0 no-repeat; background-size: 100%; margin: 50px auto; } body.mobile .empty-state .scene { margin: 20px auto; } .empty-state .scene.photos { max-width: 323px; } .empty-state .scene.family { max-width: 500px; transform: translateX(-8%); } .empty-state .scene.empty { max-width: 275px; transform: translateX(14.5%); } .empty-state .scene.trash { max-width: 168px; background-image: url(https://images-na.ssl-images-amazon.com/images/G/01/digital/photos/trash_bin.png); position: relative; } .empty-state .scene.trash:before { content: ''; display: block; padding-top: 120%; } .empty-state .scene.search { max-width: 300px; background-image: url(https://images-na.ssl-images-amazon.com/images/G/01/digital/photos/empty-state-search.svg); margin-top: 0 !important; position: relative; } body.mobile .empty-state .scene.search { -webkit-transform: translateX(-5%); -khtml-transform: translateX(-5%); -moz-transform: translateX(-5%); -ms-transform: translateX(-5%); -o-transform: translateX(-5%); transform: translateX(-5%); } .empty-state .scene.search:before { content: ''; display: block; padding-top: 86%; } .empty-state .scene.search + h3 { margin-top: 50px; } .empty-state .scene.share-landing { background-image: url(https://images-na.ssl-images-amazon.com/images/G/01/digital/photos/no_content_1.png); max-width: 267px; position: relative; } .empty-state .scene.share-landing:before { content: ''; display: block; padding-top: 113%; } .empty-state h3 { font-size: 1.2em; font-weight: bold; } .empty-state .photos-empty-state { max-width: 550px; margin: 0 auto; } .empty-state .sms-notification input[type=tel] { height: 35px; box-shadow: none; border-radius: 5px 0 0 5px; border-right: 0; } .empty-state .sms-notification button { margin: 0; height: 35px; border-radius: 0 5px 5px 0; border-left: 0; } .empty-state .download-apps h4 { font-size: 13px; } .empty-state .download-apps ul { overflow: hidden; } .empty-state .download-apps ul li { display: inline-block; margin: 0 15px; font-weight: bold; font-size: 13px; line-height: 18px; letter-spacing: 0.3px; text-align: left; } .empty-state .download-apps ul li a { display: block; overflow: hidden; -webkit-transition: color 333ms ease; -khtml-transition: color 333ms ease; -moz-transition: color 333ms ease; -ms-transition: color 333ms ease; -o-transition: color 333ms ease; transition: color 333ms ease; } .empty-state .download-apps ul li a span { display: block; margin-left: 36px; white-space: nowrap; } .empty-state .download-apps ul li a span.download-the { color: #a6aec0; letter-spacing: 0.3px; font-size: 9px; line-height: 11px; } body.mobile .empty-state .download-apps ul li a { display: block; margin: 5px 0; } .empty-state .download-apps ul li a:before { content: "\E00B"; font-size: 27px; line-height: 27px; vertical-align: middle; display: inline-block; float: left; color: #689ae2; -webkit-transition: color 333ms ease; -khtml-transition: color 333ms ease; -moz-transition: color 333ms ease; -ms-transition: color 333ms ease; -o-transition: color 333ms ease; transition: color 333ms ease; } .empty-state .download-apps ul li a:hover:before { color: #3d7eda; } body.mobile .empty-state .download-apps ul li { display: block; } body.mobile .empty-state .download-apps ul { width: 100%; max-width: 150px; margin: 0 auto; } .empty-state .printing-empty-content a { color: #3d7eda; } .empty-state .printing-empty-content p { max-width: 350px; } @charset "UTF-8"; /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ .album-csat-review-dialog .icon-spinner { -webkit-animation: none 333ms linear infinite; -khtml-animation: none 333ms linear infinite; -moz-animation: none 333ms linear infinite; -ms-animation: none 333ms linear infinite; -o-animation: none 333ms linear infinite; animation: none 333ms linear infinite; } .album-csat-review-dialog .icon-spinner { -webkit-animation-name: spin; -khtml-animation-name: spin; -moz-animation-name: spin; -ms-animation-name: spin; -o-animation-name: spin; animation-name: spin; -webkit-animation-duration: 1000ms; -khtml-animation-duration: 1000ms; -moz-animation-duration: 1000ms; -ms-animation-duration: 1000ms; -o-animation-duration: 1000ms; animation-duration: 1000ms; -webkit-animation-timing-function: linear; -khtml-animation-timing-function: linear; -moz-animation-timing-function: linear; -ms-animation-timing-function: linear; -o-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -khtml-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-iteration-count: infinite; } .album-csat-review-dialog .scale-info:after { content: ''; display: block; clear: both; } .album-csat-review-dialog .icon-spinner { background: center center no-repeat; background-size: cover; background-image: url(data:image/png;base64,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); } /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ .album-csat-review-dialog .icon-spinner { -webkit-animation: none 333ms linear infinite; -khtml-animation: none 333ms linear infinite; -moz-animation: none 333ms linear infinite; -ms-animation: none 333ms linear infinite; -o-animation: none 333ms linear infinite; animation: none 333ms linear infinite; } /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ .album-csat-review-dialog .icon-spinner { background: center center no-repeat; background-size: cover; background-image: url(data:image/png;base64,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); } .album-csat-review-dialog .scale-info:after { content: ''; display: block; clear: both; } /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ .album-csat-review-dialog .icon-spinner { -webkit-animation: none 333ms linear infinite; -khtml-animation: none 333ms linear infinite; -moz-animation: none 333ms linear infinite; -ms-animation: none 333ms linear infinite; -o-animation: none 333ms linear infinite; animation: none 333ms linear infinite; } .album-csat-review-dialog .icon-spinner { -webkit-animation-name: spin; -khtml-animation-name: spin; -moz-animation-name: spin; -ms-animation-name: spin; -o-animation-name: spin; animation-name: spin; -webkit-animation-duration: 1000ms; -khtml-animation-duration: 1000ms; -moz-animation-duration: 1000ms; -ms-animation-duration: 1000ms; -o-animation-duration: 1000ms; animation-duration: 1000ms; -webkit-animation-timing-function: linear; -khtml-animation-timing-function: linear; -moz-animation-timing-function: linear; -ms-animation-timing-function: linear; -o-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -khtml-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-iteration-count: infinite; } /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ /* ------------------------------------------------------------- Mixins meant to replace the use of z-index completely. These allow developers to focus on the intent of positioning as named layers. Each of these mixins accepts an $adjust value, which is there to allow you to prioritize multiple elements in the same layer. Mixins available: - layer-background Arguments: [$adjust] Adds approprite z-index value for elements that are meant to be below the page's main content - layer-midground Arguments: [$adjust] Adds appropriate z-index value for elements that are the page's primary content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that are meant to be priminent / above the main content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that should appear above everything else (IE - modals) ------------------------------------------------------------- */ /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ .album-csat-review-dialog .dialog-content { width: 600px; } .album-csat-review-dialog .csatQuestion { margin: 25px 0px; } .album-csat-review-dialog .rating { width: 14.2%; display: inline-block; text-align: center; } .album-csat-review-dialog .rating input[type="radio"] { display: block; margin: 0.5em auto; } .album-csat-review-dialog .scale-info { font-style: italic; font-weight: bold; } .album-csat-review-dialog .scale-info .left { text-align: left; float: left; } .album-csat-review-dialog .scale-info .right { text-align: right; float: right; } .album-csat-review-dialog .icon-spinner { width: 50px; height: 50px; overflow: hidden; vertical-align: middle; display: inline-block; margin: auto; display: block; } .album-csat-review-dialog .comments { margin: 25px 0px; width: 100%; } @charset "UTF-8"; /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ .dialog.add-to-album .add-to-album-search .search { display: inline-block; padding: 0 15px; height: 2.5em; line-height: 2.5em; border-radius: 4px; text-align: center; border: none; font-family: inherit; font-size: inherit; font-weight: bold; letter-spacing: 0.4px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dialog.add-to-album .add-to-album-search .search:disabled, .dialog.add-to-album .add-to-album-search .disabled.search { cursor: default; } .dialog.add-to-album .add-to-album-search .search + a, .dialog.add-to-album .add-to-album-search .search + button { margin-left: 15px; } .dialog.add-to-album .add-to-album-search .search { background: #FECB88; color: #765627; } .dialog.add-to-album .add-to-album-search .search:enabled:hover { background-color: #F2B769; color: #765627; } .dialog.add-to-album .add-to-album-search .search:enabled:active, .dialog.add-to-album .add-to-album-search .search:enabled.active, .dialog.add-to-album .add-to-album-search .search:enabled:focus { background-color: #ffeacf; color: #765627; } .dialog.add-to-album .add-to-album-search .search:disabled, .dialog.add-to-album .add-to-album-search .disabled.search { background-color: #fee1bb; } .dialog.add-to-album .add-to-album-search .secondary.search { background-color: #7985a3; color: #fff; font-weight: normal; } .dialog.add-to-album .add-to-album-search .secondary.search:enabled:hover { color: #fff; background-color: #637090; } .dialog.add-to-album .add-to-album-search .secondary.search:enabled:focus, .dialog.add-to-album .add-to-album-search .secondary.search:enabled:active, .dialog.add-to-album .add-to-album-search .secondary.search:enabled.active { background-color: #919bb4; color: #fff; } .dialog.add-to-album .add-to-album-search .secondary.search:disabled, .dialog.add-to-album .add-to-album-search .disabled.secondary.search { background-color: #e3e5ec; } .dialog.add-to-album .add-to-album-search input { font-size: 12px; border: 1px solid #EEE; padding: 5px 10px; display: inline-block; background: #fff; border-radius: 5px; box-shadow: inset 0px 2px 0px 0px rgba(0, 0, 0, 0.05); outline: none; } /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ /* ------------------------------------------------------------- Mixins meant to replace the use of z-index completely. These allow developers to focus on the intent of positioning as named layers. Each of these mixins accepts an $adjust value, which is there to allow you to prioritize multiple elements in the same layer. Mixins available: - layer-background Arguments: [$adjust] Adds approprite z-index value for elements that are meant to be below the page's main content - layer-midground Arguments: [$adjust] Adds appropriate z-index value for elements that are the page's primary content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that are meant to be priminent / above the main content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that should appear above everything else (IE - modals) ------------------------------------------------------------- */ .dialog.add-to-album .dialog-head:before, .dialog.add-to-album .add-to-album-search .search:before, .dialog.add-to-album .create-new button:before { font-family: "fontIcons"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; text-transform: none; } /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins meant to replace the use of z-index completely. These allow developers to focus on the intent of positioning as named layers. Each of these mixins accepts an $adjust value, which is there to allow you to prioritize multiple elements in the same layer. Mixins available: - layer-background Arguments: [$adjust] Adds approprite z-index value for elements that are meant to be below the page's main content - layer-midground Arguments: [$adjust] Adds appropriate z-index value for elements that are the page's primary content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that are meant to be priminent / above the main content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that should appear above everything else (IE - modals) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ .dialog.add-to-album .dialog-head:before, .dialog.add-to-album .add-to-album-search .search:before, .dialog.add-to-album .create-new button:before { font-family: "fontIcons"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; text-transform: none; } /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ .dialog.add-to-album { width: 400px; } .dialog.add-to-album .dialog-content { padding: 0; } .dialog.add-to-album .dialog-head:before { content: "\E003"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; } .dialog.add-to-album .add-to-album-search { position: relative; width: 100%; padding: 15px 20px; background: #F6F7FD; border-bottom: 1px solid #EEE; } .dialog.add-to-album .add-to-album-search input { width: calc(100% - 50px); height: 35px; border-radius: 5px 0 0 5px; border-right: none; border-color: #EEE; box-shadow: none; } .dialog.add-to-album .add-to-album-search .search { width: 50px; height: 35px; text-align: center; border-radius: 0 5px 5px 0; } .dialog.add-to-album .add-to-album-search .search:before { content: "\E052"; font-size: 1.3em; line-height: 1.3em; vertical-align: middle; display: inline-block; } .dialog.add-to-album .empty-state { width: 100%; padding: 15px 20px; position: absolute; top: 50%; left: 50%; -webkit-transform: translateY(-50%) translateX(-50%); -khtml-transform: translateY(-50%) translateX(-50%); -moz-transform: translateY(-50%) translateX(-50%); -ms-transform: translateY(-50%) translateX(-50%); -o-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); } .dialog.add-to-album .create-new { text-align: center; } .dialog.add-to-album .create-new button { padding: 15px; } .dialog.add-to-album .create-new button:before { content: "\E003"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; margin-right: 10px; color: #957BFF; } .dialog.add-to-album .image-node { min-height: initial; max-height: initial; } .dialog.add-to-album .photo-grid-item { height: 81px; min-height: 0; float: none; border-top: 1px solid #EEE; position: relative; width: 100% !important; } .dialog.add-to-album .photo-grid-item .album-container { position: relative; box-sizing: content-box; display: block; width: 100%; left: -20px; top: 0; right: 0; bottom: 0; padding: 15px 20px; } .dialog.add-to-album .photo-grid-item:hover, .dialog.add-to-album .photo-grid-item:hover + .node-selection-link { border-color: transparent; } .dialog.add-to-album .photo-grid-item:hover .album-container { background: #F6F7FD; } .dialog.add-to-album .photo-grid-item .sync-icon { display: none; } .dialog.add-to-album .album-node .photo-tiles { width: 75px; height: 50px; margin-right: 15px; display: inline-block; vertical-align: middle; } .dialog.add-to-album .album-node .photo-tiles.count-0 { border: 1px solid #fff; } .dialog.add-to-album .album-node .photo-tiles.count-0:before { font-size: 20px; } .dialog.add-to-album .album-node .photo-tiles.count-0:after { font-size: 13px; } .dialog.add-to-album .album-node .photo-tiles .image-node { top: 1px; bottom: 1px; left: 1px; right: 1px; } .dialog.add-to-album .album-node .photo-tiles .image-node:before { font-size: 13px !important; } .dialog.add-to-album .album-node .details { height: auto; display: inline-block; vertical-align: middle; width: calc(100% - 95px); } .dialog.add-to-album .album-node .details, .dialog.add-to-album .album-node .photo-tiles { position: relative; top: 0 !important; bottom: 0 !important; right: 0 !important; left: 0 !important; } .dialog.add-to-album .page { min-height: 81px; } .dialog.add-to-album .selector { display: none; } .dialog.add-to-album .infinite-scroll-list { top: 0; margin: 0 20px; } .dialog.add-to-album .scroller { height: 400px; } .dialog.add-to-album .empty-state .no-photo-scene { margin: 15px 0; } /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ .photo-grid .photo-grid-item { display: inline-block; height: 300px; min-height: 180px; max-height: 330px; width: 25%; } body.tablet .photo-grid .photo-grid-item { height: 180px; min-height: 146px; max-height: 232px; width: 32%; } body.mobile .photo-grid .photo-grid-item { height: 140px; min-height: 86px; max-height: 180px; width: 50%; } @charset "UTF-8"; /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ /* ------------------------------------------------------------- Mixins meant to replace the use of z-index completely. These allow developers to focus on the intent of positioning as named layers. Each of these mixins accepts an $adjust value, which is there to allow you to prioritize multiple elements in the same layer. Mixins available: - layer-background Arguments: [$adjust] Adds approprite z-index value for elements that are meant to be below the page's main content - layer-midground Arguments: [$adjust] Adds appropriate z-index value for elements that are the page's primary content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that are meant to be priminent / above the main content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that should appear above everything else (IE - modals) ------------------------------------------------------------- */ /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ .node-selection-link .selector.selected, .select-mode .node-selection-link .selector { width: 100%; height: 100%; pointer-events: all !important; } .node-selection-link .selector.selected:before, .select-mode .node-selection-link .selector:before { -webkit-transform: scale(0.95); -khtml-transform: scale(0.95); -moz-transform: scale(0.95); -ms-transform: scale(0.95); -o-transform: scale(0.95); transform: scale(0.95); } .node-selection-link { position: relative; } .node-selection-link .preload-image, .node-selection-link .node.unpreviewable, .node-selection-link .photo-tiles { -webkit-transition: top 100ms ease-out, left 100ms ease-out, right 100ms ease-out, bottom 100ms ease-out; -khtml-transition: top 100ms ease-out, left 100ms ease-out, right 100ms ease-out, bottom 100ms ease-out; -moz-transition: top 100ms ease-out, left 100ms ease-out, right 100ms ease-out, bottom 100ms ease-out; -ms-transition: top 100ms ease-out, left 100ms ease-out, right 100ms ease-out, bottom 100ms ease-out; -o-transition: top 100ms ease-out, left 100ms ease-out, right 100ms ease-out, bottom 100ms ease-out; transition: top 100ms ease-out, left 100ms ease-out, right 100ms ease-out, bottom 100ms ease-out; } .node-selection-link .selector { position: absolute; top: 0; left: 0; width: 60px; height: 60px; overflow: visible; padding: 15px; opacity: 0; } .node-selection-link .selector:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0px solid #3d7eda; opacity: 0; border-radius: 3px; box-sizing: content-box; -webkit-transition: border-width 100ms ease-out, transform 100ms ease-out; -khtml-transition: border-width 100ms ease-out, transform 100ms ease-out; -moz-transition: border-width 100ms ease-out, transform 100ms ease-out; -ms-transition: border-width 100ms ease-out, transform 100ms ease-out; -o-transition: border-width 100ms ease-out, transform 100ms ease-out; transition: border-width 100ms ease-out, transform 100ms ease-out; } .node-selection-link .selector:before { position: absolute; top: 15px; left: 15px; -webkit-transform: scale(0.7); -khtml-transform: scale(0.7); -moz-transform: scale(0.7); -ms-transform: scale(0.7); -o-transform: scale(0.7); transform: scale(0.7); } body.mobile .node-selection-link .selector { pointer-events: none; } body.mobile .node-selection-link .selector:before { display: none; } .node-selection-link .selector.selected, .select-mode .node-selection-link .selector { -webkit-transition: opacity 333ms ease; -khtml-transition: opacity 333ms ease; -moz-transition: opacity 333ms ease; -ms-transition: opacity 333ms ease; -o-transition: opacity 333ms ease; transition: opacity 333ms ease; } .node-selection-link .selector.selected, .node-selection-link .selector.pre-selected { border-width: 3px; } .node-selection-link .selector.selected:after, .node-selection-link .selector.pre-selected:after { -webkit-transform: translateX(-3px) translateY(-3px); -khtml-transform: translateX(-3px) translateY(-3px); -moz-transform: translateX(-3px) translateY(-3px); -ms-transform: translateX(-3px) translateY(-3px); -o-transform: translateX(-3px) translateY(-3px); transform: translateX(-3px) translateY(-3px); opacity: 1; border-width: 3px; } .node-selection-link .selector.selected ~ .node-link .node:not(.album-node) .preload-image, .node-selection-link .selector.selected ~ .node-link .node.unpreviewable, .node-selection-link .selector.selected ~ .node-link .node .photo-tiles, .node-selection-link .selector.selected ~ .node:not(.album-node) .preload-image, .node-selection-link .selector.selected ~ .node.unpreviewable, .node-selection-link .selector.selected ~ .node .photo-tiles, .node-selection-link .selector.pre-selected ~ .node-link .node:not(.album-node) .preload-image, .node-selection-link .selector.pre-selected ~ .node-link .node.unpreviewable, .node-selection-link .selector.pre-selected ~ .node-link .node .photo-tiles, .node-selection-link .selector.pre-selected ~ .node:not(.album-node) .preload-image, .node-selection-link .selector.pre-selected ~ .node.unpreviewable, .node-selection-link .selector.pre-selected ~ .node .photo-tiles { top: 3px; left: 3px; right: 3px; bottom: 3px; } .node-selection-link .selector.selected ~ .node-link .node .photo-tiles, .node-selection-link .selector.selected ~ .node .photo-tiles, .node-selection-link .selector.pre-selected ~ .node-link .node .photo-tiles, .node-selection-link .selector.pre-selected ~ .node .photo-tiles { bottom: 61px; } .node-selection-link .selector.pre-selected { background: rgba(255, 255, 255, 0.3); } .node-selection-link:hover .selector, .select-mode .node-selection-link .selector, .node-selection-link .selector.selected, .node-selection-link .selector.pre-selected { opacity: 1; } .node-selection-link:hover .selector:before, .select-mode .node-selection-link .selector:before, .node-selection-link .selector.selected:before, .node-selection-link .selector.pre-selected:before { -webkit-transform: scale(0.95); -khtml-transform: scale(0.95); -moz-transform: scale(0.95); -ms-transform: scale(0.95); -o-transform: scale(0.95); transform: scale(0.95); } .node-selection-link:hover .selector:hover:before, .select-mode .node-selection-link .selector:hover:before, .node-selection-link .selector.selected:hover:before, .node-selection-link .selector.pre-selected:hover:before { -webkit-transform: scale(1); -khtml-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .node-selection-link .preload-image:after { content: ''; opacity: 0; pointer-events: none; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: #232f40; -webkit-transition: opacity 333ms ease; -khtml-transition: opacity 333ms ease; -moz-transition: opacity 333ms ease; -ms-transition: opacity 333ms ease; -o-transition: opacity 333ms ease; transition: opacity 333ms ease; } .node-selection-link:hover .preload-image:after { opacity: 0.25; } .node-selection-link .node-options.family-options { position: absolute; top: 20px; right: 15px; z-index: 99; } .node-selection-link .node-options.family-options button { font-size: 1.25em; width: 1.25em; text-align: center; color: #fff; opacity: 0; -webkit-transition: opacity 333ms ease; -khtml-transition: opacity 333ms ease; -moz-transition: opacity 333ms ease; -ms-transition: opacity 333ms ease; -o-transition: opacity 333ms ease; transition: opacity 333ms ease; } .node-selection-link .node-options.family-options button .label { display: none; } .node-selection-link .node-options.family-options button.removeFromFamilyArchive { opacity: 1; } .node-selection-link .node-options.family-options button.removeFromFamilyArchive:hover { opacity: 0.85; } body.mobile .node-selection-link .node-options.family-options { display: none; } .node-selection-link:hover .node-options.family-options button { opacity: 1; } .node-selection-link.album .selector:after { box-sizing: border-box; top: 1px; left: 1px; right: 1px; bottom: 1px; width: auto; height: calc(100% - 55px) !important; } .node-selection-link.album .selector.selected:after, .select-mode .node-selection-link.album .selector:after { -webkit-transform: none; -khtml-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; } .node-selection-link.group .face .preload-image:after { display: none; } .node-selection-link.group .selector.selected, .select-mode .node-selection-link.group .selector { height: calc(100% - 85px) !important; } @charset "UTF-8"; /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ /* ------------------------------------------------------------- Mixins meant to replace the use of z-index completely. These allow developers to focus on the intent of positioning as named layers. Each of these mixins accepts an $adjust value, which is there to allow you to prioritize multiple elements in the same layer. Mixins available: - layer-background Arguments: [$adjust] Adds approprite z-index value for elements that are meant to be below the page's main content - layer-midground Arguments: [$adjust] Adds appropriate z-index value for elements that are the page's primary content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that are meant to be priminent / above the main content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that should appear above everything else (IE - modals) ------------------------------------------------------------- */ .selector:before { font-family: "fontIcons"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; text-transform: none; } /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ .selector { width: 30px; height: 30px; position: relative; z-index: 100; } .selector:before { content: "\E00D"; font-size: 14px; line-height: 14px; vertical-align: middle; display: inline-block; opacity: 0.6; display: inline-block; width: 30px; height: 30px; color: rgba(5, 5, 5, 0.4); text-align: center; border-radius: 50%; border: 2px solid rgba(5, 5, 5, 0.15); line-height: 26px; background: #fff content-box; -webkit-transition: transform 333ms ease, opacity 333ms ease; -khtml-transition: transform 333ms ease, opacity 333ms ease; -moz-transition: transform 333ms ease, opacity 333ms ease; -ms-transition: transform 333ms ease, opacity 333ms ease; -o-transition: transform 333ms ease, opacity 333ms ease; transition: transform 333ms ease, opacity 333ms ease; } .selector:hover:before, .selector.selected:before, .selector.pre-selected:before { opacity: 1; } .selector.selected:before, .selector.pre-selected:before { color: #fff; background: #3d7eda content-box; box-shadow: inset 0 0 0 2px #fff; border-color: rgba(5, 5, 5, 0.15); } @charset "UTF-8"; /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ /* ------------------------------------------------------------- Mixins meant to replace the use of z-index completely. These allow developers to focus on the intent of positioning as named layers. Each of these mixins accepts an $adjust value, which is there to allow you to prioritize multiple elements in the same layer. Mixins available: - layer-background Arguments: [$adjust] Adds approprite z-index value for elements that are meant to be below the page's main content - layer-midground Arguments: [$adjust] Adds appropriate z-index value for elements that are the page's primary content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that are meant to be priminent / above the main content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that should appear above everything else (IE - modals) ------------------------------------------------------------- */ .image-details li.deviceInfo:before, .image-details li.dateInfo:before, .image-details li.dateInfo.editable:not(.no-date) .edit-date-button:after, .image-details li.locationInfo:before, .image-details li.locationInfo.editable:not(.no-location) span.label:after, .image-details li.fileInfo:before, .image-details .close-details:before { font-family: "fontIcons"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; text-transform: none; } /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ .image-details { height: 85px; position: relative; text-align: center; background-color: #050505; font-size: 0.9em; -webkit-transition: bottom 333ms ease; -khtml-transition: bottom 333ms ease; -moz-transition: bottom 333ms ease; -ms-transition: bottom 333ms ease; -o-transition: bottom 333ms ease; transition: bottom 333ms ease; } .image-details:before, .image-details:after { content: ''; width: 50px; height: 70px; position: absolute; top: 0; background-color: transparent !important; z-index: 100; } .image-details:before { left: 0; background-color: #050505; background-image: -webkit-gradient(linear, left top, right top, from(#050505), to(transparent)); background-image: -webkit-linear-gradient(left, #050505, transparent); background-image: -moz-linear-gradient(left, #050505, transparent); background-image: -ms-linear-gradient(left, #050505, transparent); background-image: -o-linear-gradient(left, #050505, transparent); background-image: linear-gradient(left, #050505, transparent); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#050505', endColorStr='transparent', gradientType='1'); } .image-details:after { right: 0; background-color: transparent; background-image: -webkit-gradient(linear, left top, right top, from(transparent), to(#050505)); background-image: -webkit-linear-gradient(left, transparent, #050505); background-image: -moz-linear-gradient(left, transparent, #050505); background-image: -ms-linear-gradient(left, transparent, #050505); background-image: -o-linear-gradient(left, transparent, #050505); background-image: linear-gradient(left, transparent, #050505); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='transparent', endColorStr='#050505', gradientType='1'); } .image-details ul { height: 70px; margin-top: 30px; padding: 0 25px; display: block; white-space: nowrap; overflow-x: auto; overflow-y: hidden; position: relative; z-index: 0; } .image-details li { display: inline-block; vertical-align: middle; min-height: 50px; margin: 0 25px; text-align: left; position: relative; padding-left: 25px; line-height: 1.3em; color: #fff; } .image-details li.deviceInfo:before { content: "\E00B"; font-size: 16px; line-height: 16px; vertical-align: middle; display: inline-block; position: absolute; top: 0; left: 0; } .image-details li.dateInfo:before { content: "\E05B"; font-size: 16px; line-height: 16px; vertical-align: middle; display: inline-block; position: absolute; top: 0; left: 0; } .image-details li.dateInfo.editable:not(.no-date) .edit-date-button { width: 100%; } .image-details li.dateInfo.editable:not(.no-date) .edit-date-button:after { content: "\E01B"; font-size: 11px; line-height: 11px; vertical-align: middle; display: inline-block; position: relative; left: 5px; bottom: 1px; } .image-details li.dateInfo.no-date:not(.editable) { display: none; } .image-details li.locationInfo:before { content: "\E03E"; font-size: 16px; line-height: 16px; vertical-align: middle; display: inline-block; position: absolute; top: 0; left: 0; } .image-details li.locationInfo.editable:not(.no-location) span.label:after { content: "\E01B"; font-size: 11px; line-height: 11px; vertical-align: middle; display: inline-block; position: absolute; top: 0; right: 0; } .image-details li.locationInfo.no-location:not(.editable) { display: none; } .image-details li.fileInfo:before { content: "\E048"; font-size: 16px; line-height: 16px; vertical-align: middle; display: inline-block; position: absolute; top: 0; left: 0; } .image-details button { color: inherit; } .image-details button:hover:enabled { color: inherit; opacity: 0.5; } .image-details .label { display: block; font-weight: bold; } .image-details .subs { display: block; filter: alpha(opacity=50); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; -webkit-opacity: 0.5; -khtml-opacity: 0.5; -moz-opacity: 0.5; -ms-opacity: 0.5; -o-opacity: 0.5; opacity: 0.5; } .image-details .subs span { margin-left: 15px; } .image-details .subs span:first-child { margin: 0; } .image-details .close-details { position: absolute; line-height: normal; top: 10px; right: 10px; z-index: 101; } .image-details .close-details:before { content: "\E070"; font-size: 11px; line-height: 11px; vertical-align: middle; display: inline-block; color: #fff; } .image-details.details-open .image-details { bottom: 0; } /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ .dialog.edit-date-and-time .errors { text-align: left; font-size: 16px; color: #fb6b7b; padding: 5px; } .dialog.edit-date-and-time .errors li { padding: 5px; } .dialog.edit-date-and-time .date-and-time { display: flex; justify-content: space-around; flex-wrap: wrap; margin-bottom: 15px; } .dialog.edit-date-and-time .date-and-time span { display: block; margin-top: 15px; margin-bottom: 15px; font-size: 16px; font-weight: bold; text-align: left; } .dialog.edit-date-and-time .date-and-time input { height: 40px; font-size: 18px; border: 1px solid #7985a3; border-radius: 4px; width: 175px; padding: 10px; } .dialog.edit-date-and-time .edit-date-info { margin: 15px; font-size: 16px; } .dialog.edit-date-and-time .dialog-content { text-align: left; } body.mobile .dialog.edit-date-and-time .dialog-content { text-align: center; } .edit-location .dialog-content { text-align: left; } .edit-location .dialog-content span { display: block; margin-bottom: 15px; font-size: 16px; font-weight: bold; } .edit-location .dialog-content input { height: 40px; font-size: 18px; border: 1px solid #7985a3; border-radius: 4px; width: 100%; } @charset "UTF-8"; /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ /* ------------------------------------------------------------- Mixins meant to replace the use of z-index completely. These allow developers to focus on the intent of positioning as named layers. Each of these mixins accepts an $adjust value, which is there to allow you to prioritize multiple elements in the same layer. Mixins available: - layer-background Arguments: [$adjust] Adds approprite z-index value for elements that are meant to be below the page's main content - layer-midground Arguments: [$adjust] Adds appropriate z-index value for elements that are the page's primary content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that are meant to be priminent / above the main content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that should appear above everything else (IE - modals) ------------------------------------------------------------- */ .photo-mosaic .mosaic-item .in-prints-project:before { font-family: "fontIcons"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; text-transform: none; } /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ .photo-mosaic .node.unpreviewable, .photo-mosaic .node.image-loading, .photo-mosaic .node.placeholder { background-color: #f2f2f2; } .photo-mosaic .mosaic-item { height: 300px; min-height: 180px; max-height: 330px; width: 25%; } body.tablet .photo-mosaic .mosaic-item { height: 180px; min-height: 146px; max-height: 232px; width: 32%; } body.mobile .photo-mosaic .mosaic-item { height: 140px; min-height: 86px; max-height: 180px; width: 50%; } .photo-mosaic .mosaic-item .attribution, .photo-mosaic .mosaic-item .year { position: absolute; bottom: 15px; left: 15px; right: 15px; color: #fff; font-size: 16px; font-weight: 700; text-shadow: 0 1px 1px rgba(5, 5, 5, 0.2); opacity: 0; -webkit-transition: opacity 333ms ease; -khtml-transition: opacity 333ms ease; -moz-transition: opacity 333ms ease; -ms-transition: opacity 333ms ease; -o-transition: opacity 333ms ease; transition: opacity 333ms ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; z-index: 99; } .photo-mosaic .mosaic-item .year { opacity: 1; } .photo-mosaic .mosaic-item .in-prints-project { position: absolute; z-index: auto; color: #fff; bottom: 10px; right: 10px; font-size: 1.25em; z-index: 99; } .photo-mosaic .mosaic-item .in-prints-project:before { content: "\E003"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; } .select-mode .photo-mosaic .attribution, .photo-mosaic .mosaic-item:hover .attribution { opacity: 1; } @charset "UTF-8"; /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ .selection-header .cancel { display: inline-block; padding: 0 15px; height: 2.5em; line-height: 2.5em; border-radius: 4px; text-align: center; border: none; font-family: inherit; font-size: inherit; font-weight: bold; letter-spacing: 0.4px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .selection-header .cancel:disabled, .selection-header .disabled.cancel { cursor: default; } .selection-header .cancel + a, .selection-header .cancel + button { margin-left: 15px; } .selection-header .cancel { background-color: #77a9f8; color: #fff; } .selection-header .cancel:enabled:hover, .selection-header .cancel:enabled:focus, .selection-header .cancel:enabled:active, .selection-header .cancel:enabled.active { background-color: #69a0f8; color: #fff; } .selection-header .cancel:disabled, .selection-header .disabled.cancel { background-color: #5a97f7; } /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ /* ------------------------------------------------------------- Mixins meant to replace the use of z-index completely. These allow developers to focus on the intent of positioning as named layers. Each of these mixins accepts an $adjust value, which is there to allow you to prioritize multiple elements in the same layer. Mixins available: - layer-background Arguments: [$adjust] Adds approprite z-index value for elements that are meant to be below the page's main content - layer-midground Arguments: [$adjust] Adds appropriate z-index value for elements that are the page's primary content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that are meant to be priminent / above the main content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that should appear above everything else (IE - modals) ------------------------------------------------------------- */ body.mobile .selection-header .cancel:before, .selection-header .photos-selected:before, .selection-header .expandable-nav .toggle:before, .selection-header .add-family-archive:before, .selection-header .remove-family-archive:before, .selection-header .share:before, .selection-header .trash:before, .selection-header .download:before, .selection-header .upload:before, .selection-header .order-photobook:before, .selection-header .buy-prints:before, .selection-header .add-to-album:before, .selection-header .hide:before, .selection-header .unhide:before, .selection-header .delete:before, .selection-header .restore:before, .selection-header .remove-from-album:before, .selection-header .set-album-cover:before, .selection-header .like-photo-auto-album:before, .selection-header .dislike-photo-auto-album:before, .selection-header .bulk-face-edit:before, .selection-header .remove-face:before, .selection-header .reassign-face:before, .selection-header .edit-date-and-time:before, .selection-header .edit-location:before, .selection-header .edit-group:before, .selection-header .delete-group:before, .selection-header .remove-from-group:before, .selection-header .leave-group:before, .selection-header .select-all-overflow:before, .selection-header .deselect-all-overflow:before { font-family: "fontIcons"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; text-transform: none; } /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ .selection-header { background-color: #3d7eda; font-size: 0.9em; position: fixed; top: 0; left: 0; right: 0; height: 75px; line-height: 75px; color: #fff; z-index: 201; -webkit-transition: opacity 333ms ease; -khtml-transition: opacity 333ms ease; -moz-transition: opacity 333ms ease; -ms-transition: opacity 333ms ease; -o-transition: opacity 333ms ease; transition: opacity 333ms ease; /* All Icons used on the selection bar */ } body.mobile .selection-header { height: 50px; line-height: 50px; } .selection-header .actions { white-space: nowrap; } .selection-header .actions button { color: #fff; margin-left: 15px; } .selection-header .actions button:enabled:hover, .selection-header .actions button:enabled:active, .selection-header .actions button:enabled:focus { color: #fff; } .selection-header .actions li { display: inline-block; } body.mobile .selection-header .actions span { display: none; } body.mobile .selection-header .actions .expandable-nav span { display: inline; } .selection-header .actions .expandable-nav button { margin-left: 0; } .selection-header .actions .expandable-nav span { display: inline !important; color: #7985a3; } .selection-header button span { margin-left: 7px; } .selection-header .select-all, .selection-header .deselect-all { color: #e6e6e6; margin-left: 15px; } .selection-header .select-all:enabled:hover, .selection-header .select-all:enabled:active, .selection-header .select-all:enabled:focus, .selection-header .deselect-all:enabled:hover, .selection-header .deselect-all:enabled:active, .selection-header .deselect-all:enabled:focus { color: #fff; } body.mobile .selection-header .select-all, body.mobile .selection-header .deselect-all { margin-left: 5px; } .selection-header .cancel { margin-left: 15px; } .selection-header .cancel span { margin: 0; } .selection-header .cancel:enabled, .selection-header .cancel:hover, .selection-header .cancel:focus { color: #fff; } body.mobile .selection-header .cancel { padding: 0 10px; } body.mobile .selection-header .cancel:before { content: "\E070"; font-size: 15px; line-height: 15px; vertical-align: middle; display: inline-block; } body.mobile .selection-header .cancel span { display: none; } .selection-header .photos-selected { white-space: nowrap; } .selection-header .photos-selected:before { content: "\E00D"; font-size: 10px; line-height: 10px; vertical-align: middle; display: inline-block; color: #3d7eda; width: 22px; height: 22px; line-height: 22px; background: #fff; border-radius: 50%; text-align: center; vertical-align: middle; margin-right: 7px; display: inline-block; } body.mobile .selection-header .photos-selected { display: none; } .selection-header .columns .column { white-space: nowrap; text-align: center; } .selection-header .columns .group-actions { overflow: hidden; } .selection-header .columns button { white-space: nowrap; } .selection-header .columns .overflow .actions button span, .selection-header .columns .overflow .select-all span { display: none; } .selection-header .expandable-nav { line-height: 55px; margin-left: 15px; } body.mobile .selection-header .expandable-nav { margin-left: 10px; line-height: 30px; } .selection-header .expandable-nav .toggle { color: #fff; } .selection-header .expandable-nav .toggle:before { content: "\E045"; font-size: 4px; line-height: 4px; vertical-align: middle; display: inline-block; text-align: center; } .selection-header button:before { min-width: 20px; } .selection-header h1 { margin: 0; padding: 0; color: inherit; font-size: 1.3em; font-weight: bold; } body.mobile .selection-header h1 { display: none; } .selection-header .overflow h1 { display: none; } .selection-header .add-family-archive:before { content: "\E022"; font-size: 15px; line-height: 15px; vertical-align: middle; display: inline-block; } .selection-header .remove-family-archive:before { content: "\E039"; font-size: 15px; line-height: 15px; vertical-align: middle; display: inline-block; } .selection-header .share:before { content: "\E056"; font-size: 15px; line-height: 15px; vertical-align: middle; display: inline-block; } .selection-header .trash:before { content: "\E015"; font-size: 15px; line-height: 15px; vertical-align: middle; display: inline-block; } .selection-header .download:before { content: "\E01A"; font-size: 15px; line-height: 15px; vertical-align: middle; display: inline-block; } .selection-header .upload:before { content: "\E064"; font-size: 15px; line-height: 15px; vertical-align: middle; display: inline-block; } .selection-header .order-photobook:before { content: "\E04B"; font-size: 15px; line-height: 15px; vertical-align: middle; display: inline-block; } .selection-header .buy-prints:before { content: "\E04B"; font-size: 15px; line-height: 15px; vertical-align: middle; display: inline-block; } .selection-header .add-to-album:before { content: "\E003"; font-size: 15px; line-height: 15px; vertical-align: middle; display: inline-block; } .selection-header .hide:before { content: "\E037"; font-size: 15px; line-height: 15px; vertical-align: middle; display: inline-block; } .selection-header .unhide:before { content: "\E05D"; font-size: 15px; line-height: 15px; vertical-align: middle; display: inline-block; } .selection-header .delete:before { content: "\E015"; font-size: 15px; line-height: 15px; vertical-align: middle; display: inline-block; } .selection-header .restore:before { content: "\E050"; font-size: 15px; line-height: 15px; vertical-align: middle; display: inline-block; } .selection-header .remove-from-album:before { content: "\E070"; font-size: 15px; line-height: 15px; vertical-align: middle; display: inline-block; } .selection-header .set-album-cover:before { content: "\E062"; font-size: 15px; line-height: 15px; vertical-align: middle; display: inline-block; } .selection-header .like-photo-auto-album:before { content: "\E03C"; font-size: 15px; line-height: 15px; vertical-align: middle; display: inline-block; } .selection-header .dislike-photo-auto-album:before { content: "\E017"; font-size: 15px; line-height: 15px; vertical-align: middle; display: inline-block; } .selection-header .bulk-face-edit:before { content: "\E01B"; font-size: 15px; line-height: 15px; vertical-align: middle; display: inline-block; } .selection-header .remove-face:before { content: "\E015"; font-size: 15px; line-height: 15px; vertical-align: middle; display: inline-block; } .selection-header .reassign-face:before { content: "\E039"; font-size: 15px; line-height: 15px; vertical-align: middle; display: inline-block; } .selection-header .edit-date-and-time:before { content: "\E05B"; font-size: 15px; line-height: 15px; vertical-align: middle; display: inline-block; } .selection-header .edit-location:before { content: "\E03E"; font-size: 15px; line-height: 15px; vertical-align: middle; display: inline-block; } .selection-header .edit-group:before { content: "\E01B"; font-size: 15px; line-height: 15px; vertical-align: middle; display: inline-block; } .selection-header .delete-group:before { content: "\E015"; font-size: 15px; line-height: 15px; vertical-align: middle; display: inline-block; } .selection-header .remove-from-group:before { content: "\E04D"; font-size: 15px; line-height: 15px; vertical-align: middle; display: inline-block; } .selection-header .leave-group:before { content: "\E058"; font-size: 15px; line-height: 15px; vertical-align: middle; display: inline-block; } .selection-header .select-all-overflow:before { content: "\E00D"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .selection-header .deselect-all-overflow:before { content: "\E070"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .selection-header .select-all-overflow:before, .selection-header .deselect-all-overflow:before { font-size: 10px; width: 20px; height: 20px; line-height: 20px; background-color: #7985a3; color: #fff; vertical-align: middle; text-align: center; border-radius: 50%; display: inline-block; } .selection-header .no-collapse span { display: inline !important; margin: 0; } @charset "UTF-8"; /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ /* ------------------------------------------------------------- Mixins meant to replace the use of z-index completely. These allow developers to focus on the intent of positioning as named layers. Each of these mixins accepts an $adjust value, which is there to allow you to prioritize multiple elements in the same layer. Mixins available: - layer-background Arguments: [$adjust] Adds approprite z-index value for elements that are meant to be below the page's main content - layer-midground Arguments: [$adjust] Adds appropriate z-index value for elements that are the page's primary content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that are meant to be priminent / above the main content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that should appear above everything else (IE - modals) ------------------------------------------------------------- */ .dialog.report-abuse .dialog-head:before { font-family: "fontIcons"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; text-transform: none; } /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ .dialog.report-abuse .dialog-head:before { content: "\E031"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; } @charset "UTF-8"; /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ .report-abuse input, .report-abuse textarea { font-size: 12px; border: 1px solid #EEE; padding: 5px 10px; display: inline-block; background: #fff; border-radius: 5px; box-shadow: inset 0px 2px 0px 0px rgba(0, 0, 0, 0.05); outline: none; } .report-abuse select { border: 1px solid #EEE; background: #fff; border-radius: 5px; display: inline-block; height: 2em; } /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ /* ------------------------------------------------------------- Mixins meant to replace the use of z-index completely. These allow developers to focus on the intent of positioning as named layers. Each of these mixins accepts an $adjust value, which is there to allow you to prioritize multiple elements in the same layer. Mixins available: - layer-background Arguments: [$adjust] Adds approprite z-index value for elements that are meant to be below the page's main content - layer-midground Arguments: [$adjust] Adds appropriate z-index value for elements that are the page's primary content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that are meant to be priminent / above the main content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that should appear above everything else (IE - modals) ------------------------------------------------------------- */ /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ .report-abuse { margin: 0 auto; max-width: 500px; } .report-abuse h1 { font-size: 1em; font-weight: bold; } .report-abuse p { clear: both; } .report-abuse label, .report-abuse input, .report-abuse textarea, .report-abuse select { float: left; margin: 15px 0; } .report-abuse input, .report-abuse textarea { width: calc(100% - 135px); } .report-abuse input.invalid, .report-abuse textarea.invalid { color: #ff0000; } .report-abuse select { width: calc(100% - 135px); } .report-abuse label { clear: both; font-size: 0.9em; width: 135px; } .report-abuse a.button { vertical-align: bottom; } .auto-album-photo-feedback-dialog .dialog-content { text-align: center; } .auto-album-photo-feedback-dialog .dialog-content li { margin: 15px; } .auto-album-photo-feedback-dialog .dialog-content .button.reason { width: 250px; } @charset "UTF-8"; .dialog.group-settings .rename-popup .rename-submit, .dialog.group-settings .invite-members, .dialog.group-settings .change-invite-link, .dialog.group-settings .members-expand, .dialog.group-settings .report-abuse, .dialog.group-settings .delete-group, .dialog.group-settings .leave-group { display: inline-block; padding: 0 15px; height: 2.5em; line-height: 2.5em; border-radius: 4px; text-align: center; border: none; font-family: inherit; font-size: inherit; font-weight: bold; letter-spacing: 0.4px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dialog.group-settings .rename-popup .rename-submit:disabled, .dialog.group-settings .invite-members:disabled, .dialog.group-settings .change-invite-link:disabled, .dialog.group-settings .members-expand:disabled, .dialog.group-settings .report-abuse:disabled, .dialog.group-settings .delete-group:disabled, .dialog.group-settings .leave-group:disabled, .dialog.group-settings .rename-popup .disabled.rename-submit, .dialog.group-settings .disabled.invite-members, .dialog.group-settings .disabled.change-invite-link, .dialog.group-settings .disabled.members-expand, .dialog.group-settings .disabled.report-abuse, .dialog.group-settings .disabled.delete-group, .dialog.group-settings .disabled.leave-group { cursor: default; } .dialog.group-settings .rename-popup .rename-submit + a, .dialog.group-settings .invite-members + a, .dialog.group-settings .change-invite-link + a, .dialog.group-settings .members-expand + a, .dialog.group-settings .report-abuse + a, .dialog.group-settings .delete-group + a, .dialog.group-settings .leave-group + a, .dialog.group-settings .rename-popup .rename-submit + button, .dialog.group-settings .invite-members + button, .dialog.group-settings .change-invite-link + button, .dialog.group-settings .members-expand + button, .dialog.group-settings .report-abuse + button, .dialog.group-settings .delete-group + button, .dialog.group-settings .leave-group + button { margin-left: 15px; } .dialog.group-settings .rename-popup .rename-submit, .dialog.group-settings .invite-members { background: #FECB88; color: #765627; } .dialog.group-settings .rename-popup .rename-submit:enabled:hover, .dialog.group-settings .invite-members:enabled:hover { background-color: #F2B769; color: #765627; } .dialog.group-settings .rename-popup .rename-submit:enabled:active, .dialog.group-settings .invite-members:enabled:active, .dialog.group-settings .rename-popup .rename-submit:enabled.active, .dialog.group-settings .invite-members:enabled.active, .dialog.group-settings .rename-popup .rename-submit:enabled:focus, .dialog.group-settings .invite-members:enabled:focus { background-color: #ffeacf; color: #765627; } .dialog.group-settings .rename-popup .rename-submit:disabled, .dialog.group-settings .invite-members:disabled, .dialog.group-settings .rename-popup .disabled.rename-submit, .dialog.group-settings .disabled.invite-members { background-color: #fee1bb; } .dialog.group-settings .rename-popup .secondary.rename-submit, .dialog.group-settings .secondary.invite-members { background-color: #7985a3; color: #fff; font-weight: normal; } .dialog.group-settings .rename-popup .secondary.rename-submit:enabled:hover, .dialog.group-settings .secondary.invite-members:enabled:hover { color: #fff; background-color: #637090; } .dialog.group-settings .rename-popup .secondary.rename-submit:enabled:focus, .dialog.group-settings .secondary.invite-members:enabled:focus, .dialog.group-settings .rename-popup .secondary.rename-submit:enabled:active, .dialog.group-settings .secondary.invite-members:enabled:active, .dialog.group-settings .rename-popup .secondary.rename-submit:enabled.active, .dialog.group-settings .secondary.invite-members:enabled.active { background-color: #919bb4; color: #fff; } .dialog.group-settings .rename-popup .secondary.rename-submit:disabled, .dialog.group-settings .secondary.invite-members:disabled, .dialog.group-settings .rename-popup .disabled.secondary.rename-submit, .dialog.group-settings .disabled.secondary.invite-members { background-color: #e3e5ec; } .dialog.group-settings .change-invite-link, .dialog.group-settings .members-expand, .dialog.group-settings .report-abuse { background: none; color: inherit; } .dialog.group-settings .change-invite-link:enabled:hover, .dialog.group-settings .members-expand:enabled:hover, .dialog.group-settings .report-abuse:enabled:hover, .dialog.group-settings .change-invite-link:enabled:focus, .dialog.group-settings .members-expand:enabled:focus, .dialog.group-settings .report-abuse:enabled:focus, .dialog.group-settings .change-invite-link:enabled:active, .dialog.group-settings .members-expand:enabled:active, .dialog.group-settings .report-abuse:enabled:active, .dialog.group-settings .change-invite-link:enabled.active, .dialog.group-settings .members-expand:enabled.active, .dialog.group-settings .report-abuse:enabled.active { color: inherit; background: none; } .dialog.group-settings .change-invite-link, .dialog.group-settings .members-expand, .dialog.group-settings .report-abuse { border: 1px solid #EEE; } .dialog.group-settings .delete-group, .dialog.group-settings .leave-group { background-color: #f78595; color: #fff; } .dialog.group-settings .delete-group:enabled:hover, .dialog.group-settings .leave-group:enabled:hover, .dialog.group-settings .delete-group:enabled:focus, .dialog.group-settings .leave-group:enabled:focus, .dialog.group-settings .delete-group:enabled:active, .dialog.group-settings .leave-group:enabled:active, .dialog.group-settings .delete-group:enabled.active, .dialog.group-settings .leave-group:enabled.active { background-color: #f56d80; } .dialog.group-settings .expandable-list button.setting-expand:after { content: ''; display: block; clear: both; } /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ .dialog.group-settings .rename-popup input { font-size: 12px; border: 1px solid #EEE; padding: 5px 10px; display: inline-block; background: #fff; border-radius: 5px; box-shadow: inset 0px 2px 0px 0px rgba(0, 0, 0, 0.05); outline: none; } .dialog.group-settings .change-cover:before, .dialog.group-settings .rename-popup .toggle:after, .dialog.group-settings .rename-popup .rename-submit:before, .dialog.group-settings .expandable-list button.setting-expand:after, .dialog.group-settings .members .remove-member:before, .dialog.group-settings .members .last-seen.up-to-date:before { font-family: "fontIcons"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; text-transform: none; } /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ .dialog.group-settings .cover-container { position: relative; } .dialog.group-settings .cover-container .group-node { position: relative; background: #F6F7FD; } .dialog.group-settings .cover-container .group-node .cover { position: relative; } .dialog.group-settings .cover-container .group-node .cover:before { content: ''; display: block; padding-top: 40%; } .dialog.group-settings .change-cover { position: absolute; bottom: 15px; right: 15px; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, 0.9); color: #999; text-align: center; -webkit-transition: transform 333ms, color 333ms, background 333ms; -khtml-transition: transform 333ms, color 333ms, background 333ms; -moz-transition: transform 333ms, color 333ms, background 333ms; -ms-transition: transform 333ms, color 333ms, background 333ms; -o-transition: transform 333ms, color 333ms, background 333ms; transition: transform 333ms, color 333ms, background 333ms; } .dialog.group-settings .change-cover:hover { background: rgba(61, 126, 218, 0.9); -webkit-transform: scale(1.2, 1.2); -khtml-transform: scale(1.2, 1.2); -moz-transform: scale(1.2, 1.2); -ms-transform: scale(1.2, 1.2); -o-transform: scale(1.2, 1.2); transform: scale(1.2, 1.2); color: #fff; } .dialog.group-settings .change-cover:before { content: "\E00A"; font-size: 14px; line-height: 14px; vertical-align: middle; display: inline-block; line-height: 36px; } .dialog.group-settings section.settings { padding: 0 15px 15px 15px; } .dialog.group-settings h2 { font-size: 1.5em; padding: 15px 0; font-weight: normal; text-align: center; margin: 0; } .dialog.group-settings h3 { padding: 0 15px; margin: 0; font-size: 1em; line-height: 2.5em; text-transform: uppercase; text-align: left; color: #333; background: #F6F7FD; width: 100%; position: relative; left: -15px; box-sizing: content-box; } .dialog.group-settings .rename-popup .toggle { text-align: center; padding: 0 15px; } .dialog.group-settings .rename-popup .toggle:after { content: "\E01B"; font-size: 12px; line-height: 12px; vertical-align: middle; display: inline-block; right: 0; opacity: 0; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -khtml-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: opacity 333ms; -khtml-transition: opacity 333ms; -moz-transition: opacity 333ms; -ms-transition: opacity 333ms; -o-transition: opacity 333ms; transition: opacity 333ms; } .dialog.group-settings .rename-popup .toggle:hover:after { opacity: 1; } .dialog.group-settings .rename-popup .expanded-nav { width: 275px; top: calc(100% + 10px); } .dialog.group-settings .rename-popup form { display: flex; font-size: 14px; line-height: normal; } .dialog.group-settings .rename-popup input { flex-basis: 100%; flex-shrink: 1; border-radius: 4px 0 0 4px; } .dialog.group-settings .rename-popup .rename-submit { flex-grow: 1; overflow: visible; border-radius: 0 4px 4px 0; } .dialog.group-settings .rename-popup .rename-submit:before { content: "\E00D"; font-size: 12px; line-height: 12px; vertical-align: middle; display: inline-block; } .dialog.group-settings .expandable-list { box-sizing: content-box; position: relative; width: 100%; left: -15px; padding: 0 15px; margin: 10px 0; } .dialog.group-settings .expandable-list button.setting-expand { font-size: inherit; line-height: inherit; color: inherit; text-align: inherit; height: auto; text-transform: inherit; } .dialog.group-settings .expandable-list button.setting-expand:after { content: "\E051"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; float: right; -webkit-transition: transform 333ms ease; -khtml-transition: transform 333ms ease; -moz-transition: transform 333ms ease; -ms-transition: transform 333ms ease; -o-transition: transform 333ms ease; transition: transform 333ms ease; } .dialog.group-settings .expandable-list.expand button.setting-expand:after { -webkit-transform: rotate(90deg); -khtml-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } .dialog.group-settings .dialog-content { padding: 0 0 15px 0; } .dialog.group-settings .setting-expand, .dialog.group-settings .delete-group, .dialog.group-settings .invite-members, .dialog.group-settings .change-invite-link, .dialog.group-settings .leave-group, .dialog.group-settings .members-expand, .dialog.group-settings .report-abuse { width: 100%; } .dialog.group-settings .delete-group, .dialog.group-settings .leave-group { margin: 10px 0 0 0; } .dialog.group-settings .members-expand { margin-bottom: 10px; } .dialog.group-settings .members { margin-bottom: 10px; } .dialog.group-settings .members li { padding: 15px 5px 5px 0; padding-right: 25px; position: relative; display: flex; align-items: center; } .dialog.group-settings .members .name { vertical-align: middle; } .dialog.group-settings .members .remove-member { right: 0; padding: 5px; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -khtml-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .dialog.group-settings .members .remove-member:before { content: "\E070"; font-size: 10px; line-height: 10px; vertical-align: middle; display: inline-block; } .dialog.group-settings .members .last-seen { display: block; font-size: 0.9em; } .dialog.group-settings .members .last-seen.up-to-date:before { content: "\E00D"; font-size: 0.8em; line-height: 0.8em; vertical-align: middle; display: inline-block; margin-right: 5px; color: #3d7eda; } .dialog.group-settings .members strong { font-size: 0.8em; display: inline-block; vertical-align: middle; color: #999; margin-left: 10px; text-transform: uppercase; } .dialog.group-settings .members .customer-avatar { width: 40px; height: 40px; flex-shrink: 0; margin-right: 15px; vertical-align: middle; border: none; } .dialog.group-settings .invite-link .copy-input-container { height: 2.5em; position: relative; margin: 15px 0; } .dialog.group-settings .loading { position: absolute; } .dialog.group-settings .notification-settings h4 { font-size: 1em; color: #232323; font-weight: normal; margin: 0; } .dialog.group-settings .notification-setting { position: relative; box-sizing: content-box; width: 100%; padding: 0 15px 15px; margin: 15px 0; left: -15px; border-bottom: 1px solid #EEE; display: flex; } .dialog.group-settings .notification-setting .name { flex-basis: 100%; padding-right: 15px; } .dialog.group-settings .notification-setting .toggle-switch { flex-shrink: 1; } .dialog.group-settings .notification-setting .state { position: relative; margin-right: -15px; margin-left: 0; display: inline-block; min-width: 50px; text-align: center; } @charset "UTF-8"; /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ .dialog.side-dialog { top: 0; right: 0; bottom: 0; left: auto; width: 400px; max-width: 400px; opacity: 0; display: flex; flex-direction: column; -webkit-transition: transform 333ms ease, opacity 333ms ease; -khtml-transition: transform 333ms ease, opacity 333ms ease; -moz-transition: transform 333ms ease, opacity 333ms ease; -ms-transition: transform 333ms ease, opacity 333ms ease; -o-transition: transform 333ms ease, opacity 333ms ease; transition: transform 333ms ease, opacity 333ms ease; -webkit-transform: translateX(100%); -khtml-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); } @media screen and (max-width: 700px) { .dialog.side-dialog { width: 100%; } } .dialog.side-dialog.visible { opacity: 1; -webkit-transform: TranslateX(0); -khtml-transform: TranslateX(0); -moz-transform: TranslateX(0); -ms-transform: TranslateX(0); -o-transform: TranslateX(0); transform: TranslateX(0); } .dialog.side-dialog, .dialog.side-dialog .dialog-head, .dialog.side-dialog .dialog-content, .dialog.side-dialog footer { border-radius: 0; } .dialog.side-dialog .dialog-content { overflow-y: auto; overflow-x: hidden; flex-basis: 100%; } @charset "UTF-8"; /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ /* ------------------------------------------------------------- Mixins meant to replace the use of z-index completely. These allow developers to focus on the intent of positioning as named layers. Each of these mixins accepts an $adjust value, which is there to allow you to prioritize multiple elements in the same layer. Mixins available: - layer-background Arguments: [$adjust] Adds approprite z-index value for elements that are meant to be below the page's main content - layer-midground Arguments: [$adjust] Adds appropriate z-index value for elements that are the page's primary content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that are meant to be priminent / above the main content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that should appear above everything else (IE - modals) ------------------------------------------------------------- */ /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ .expandable-list { -webkit-transition: max-height 333ms ease; -khtml-transition: max-height 333ms ease; -moz-transition: max-height 333ms ease; -ms-transition: max-height 333ms ease; -o-transition: max-height 333ms ease; transition: max-height 333ms ease; overflow: hidden; } @charset "UTF-8"; /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ body.tablet #printing .selection-header .actions .upload, body.desktop #printing .selection-header .actions .upload { display: inline-block; padding: 0 15px; height: 2.5em; line-height: 2.5em; border-radius: 4px; text-align: center; border: none; font-family: inherit; font-size: inherit; font-weight: bold; letter-spacing: 0.4px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.tablet #printing .selection-header .actions .upload:disabled, body.desktop #printing .selection-header .actions .upload:disabled, body.tablet #printing .selection-header .actions .disabled.upload, body.desktop #printing .selection-header .actions .disabled.upload { cursor: default; } body.tablet #printing .selection-header .actions .upload + a, body.desktop #printing .selection-header .actions .upload + a, body.tablet #printing .selection-header .actions .upload + button, body.desktop #printing .selection-header .actions .upload + button { margin-left: 15px; } body.tablet #printing .selection-header .actions .upload, body.desktop #printing .selection-header .actions .upload { background-color: #77a9f8; color: #fff; } body.tablet #printing .selection-header .actions .upload:enabled:hover, body.desktop #printing .selection-header .actions .upload:enabled:hover, body.tablet #printing .selection-header .actions .upload:enabled:focus, body.desktop #printing .selection-header .actions .upload:enabled:focus, body.tablet #printing .selection-header .actions .upload:enabled:active, body.desktop #printing .selection-header .actions .upload:enabled:active, body.tablet #printing .selection-header .actions .upload:enabled.active, body.desktop #printing .selection-header .actions .upload:enabled.active { background-color: #69a0f8; color: #fff; } body.tablet #printing .selection-header .actions .upload:disabled, body.desktop #printing .selection-header .actions .upload:disabled, body.tablet #printing .selection-header .actions .disabled.upload, body.desktop #printing .selection-header .actions .disabled.upload { background-color: #5a97f7; } /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ /* ------------------------------------------------------------- Mixins meant to replace the use of z-index completely. These allow developers to focus on the intent of positioning as named layers. Each of these mixins accepts an $adjust value, which is there to allow you to prioritize multiple elements in the same layer. Mixins available: - layer-background Arguments: [$adjust] Adds approprite z-index value for elements that are meant to be below the page's main content - layer-midground Arguments: [$adjust] Adds appropriate z-index value for elements that are the page's primary content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that are meant to be priminent / above the main content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that should appear above everything else (IE - modals) ------------------------------------------------------------- */ #printing .selection-header .photos-selected:before, body.mobile #printing .selection-header .actions .buy-prints:before { font-family: "fontIcons"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; text-transform: none; } /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ body.mobile #printing .selection-header .select-all, body.mobile #printing .selection-header .deselect-all { display: none; } #printing .selection-header .photos-selected:before { content: "\E048"; font-size: 21px; line-height: 21px; vertical-align: middle; display: inline-block; background: initial; color: #fff; } body.mobile #printing .selection-header .photos-selected { display: inline; margin-left: 5px; } body.mobile #printing .selection-header .actions .buy-prints { padding: 0 10px; } body.mobile #printing .selection-header .actions .buy-prints:before { content: "\E00D"; font-size: 15px; line-height: 15px; vertical-align: middle; display: inline-block; } #printing .selection-header .actions .upload { display: none; } body.tablet #printing .selection-header .actions .upload, body.desktop #printing .selection-header .actions .upload { display: none; } #printing .selection-header .actions .expandable-nav { display: none; } body.mobile #printing .selection-header .actions .expandable-nav { display: inline-block; } #printing #photos .selection-header .actions .upload { display: inline-block; } #printing #albums .selection-header .select-all, #printing #albums .selection-header .deselect-all { display: none; } #printing #albums .selection-header .actions .overflow-menu { display: none; } #groups .create-group { display: inline-block; padding: 0 15px; height: 2.5em; line-height: 2.5em; border-radius: 4px; text-align: center; border: none; font-family: inherit; font-size: inherit; font-weight: bold; letter-spacing: 0.4px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #groups .create-group:disabled, #groups .disabled.create-group { cursor: default; } #groups .create-group + a, #groups .create-group + button { margin-left: 15px; } #groups .create-group { background: #FECB88; color: #765627; } #groups .create-group:enabled:hover { background-color: #F2B769; color: #765627; } #groups .create-group:enabled:active, #groups .create-group:enabled.active, #groups .create-group:enabled:focus { background-color: #ffeacf; color: #765627; } #groups .create-group:disabled, #groups .disabled.create-group { background-color: #fee1bb; } #groups .secondary.create-group { background-color: #7985a3; color: #fff; font-weight: normal; } #groups .secondary.create-group:enabled:hover { color: #fff; background-color: #637090; } #groups .secondary.create-group:enabled:focus, #groups .secondary.create-group:enabled:active, #groups .secondary.create-group:enabled.active { background-color: #919bb4; color: #fff; } #groups .secondary.create-group:disabled, #groups .disabled.secondary.create-group { background-color: #e3e5ec; } #groups .mobile-apps { display: inline; color: #3d7eda; } #groups .mobile-apps:enabled:hover, #groups .mobile-apps:enabled:focus, #groups .mobile-apps:enabled:active, #groups .mobile-apps:enabled.active { color: #2565bf; } #groups .mobile-apps:disabled, #groups .disabled.mobile-apps { color: #3a89f6; } #groups header.actions { display: flex; flex-wrap: wrap; } #groups header.actions > * { width: 50%; } #groups header.actions > *:nth-child(even) { text-align: right; } #groups header.actions h1 { font-size: 2.5em; margin: 0; } #groups .mobile-apps { line-height: 2.5em; } @charset "UTF-8"; /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ body.tablet .side-nav.wrapper.scrolled .back-to-top, body.desktop .side-nav.wrapper.scrolled .back-to-top { -webkit-animation: none 333ms linear infinite; -khtml-animation: none 333ms linear infinite; -moz-animation: none 333ms linear infinite; -ms-animation: none 333ms linear infinite; -o-animation: none 333ms linear infinite; animation: none 333ms linear infinite; } /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ body.tablet .side-nav.wrapper.scrolled .back-to-top, body.desktop .side-nav.wrapper.scrolled .back-to-top { -webkit-animation: none 333ms linear infinite; -khtml-animation: none 333ms linear infinite; -moz-animation: none 333ms linear infinite; -ms-animation: none 333ms linear infinite; -o-animation: none 333ms linear infinite; animation: none 333ms linear infinite; } /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ body.tablet .side-nav.wrapper.scrolled .back-to-top, body.desktop .side-nav.wrapper.scrolled .back-to-top { -webkit-animation: none 333ms linear infinite; -khtml-animation: none 333ms linear infinite; -moz-animation: none 333ms linear infinite; -ms-animation: none 333ms linear infinite; -o-animation: none 333ms linear infinite; animation: none 333ms linear infinite; } /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ /* ------------------------------------------------------------- Mixins meant to replace the use of z-index completely. These allow developers to focus on the intent of positioning as named layers. Each of these mixins accepts an $adjust value, which is there to allow you to prioritize multiple elements in the same layer. Mixins available: - layer-background Arguments: [$adjust] Adds approprite z-index value for elements that are meant to be below the page's main content - layer-midground Arguments: [$adjust] Adds appropriate z-index value for elements that are the page's primary content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that are meant to be priminent / above the main content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that should appear above everything else (IE - modals) ------------------------------------------------------------- */ .side-nav.wrapper .menu-expand:before, .side-nav.wrapper .back-to-top:before { font-family: "fontIcons"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; text-transform: none; } /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ .side-nav.wrapper { position: absolute; width: 170px; } .side-nav.wrapper .menu-expand-container { display: none; } .side-nav.wrapper .menu-expand-container button { color: inherit; } .side-nav.wrapper .menu-expand { text-align: center; } .side-nav.wrapper .menu-expand:before { content: "\E042"; font-size: 15px; line-height: 15px; vertical-align: middle; display: inline-block; } .side-nav.wrapper .back-to-top { display: none; font-weight: bold; text-align: center; } .side-nav.wrapper .back-to-top:before { content: "\E007"; font-size: 10px; line-height: 10px; vertical-align: middle; display: inline-block; -webkit-transform: rotate(90deg); -khtml-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } .side-nav.wrapper .menu-backdrop { display: none; } .side-nav.wrapper .inner > * { margin-bottom: 15px; } body.mobile .side-nav.wrapper { position: fixed; top: 0; left: -190px; width: 190px; bottom: 0; z-index: 201; -webkit-transition: left 333ms ease, box-shadow 333ms ease; -khtml-transition: left 333ms ease, box-shadow 333ms ease; -moz-transition: left 333ms ease, box-shadow 333ms ease; -ms-transition: left 333ms ease, box-shadow 333ms ease; -o-transition: left 333ms ease, box-shadow 333ms ease; transition: left 333ms ease, box-shadow 333ms ease; } body.mobile .side-nav.wrapper.dragging { -webkit-transition: box-shadow 333ms ease; -khtml-transition: box-shadow 333ms ease; -moz-transition: box-shadow 333ms ease; -ms-transition: box-shadow 333ms ease; -o-transition: box-shadow 333ms ease; transition: box-shadow 333ms ease; } body.mobile .side-nav.wrapper .inner { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #fff; padding: 10px; overflow-y: auto; overflow-x: hidden; z-index: 300; } body.mobile .side-nav.wrapper .menu-backdrop { display: block; position: fixed; background: rgba(35, 47, 64, 0.5); top: 0; left: 0; bottom: 0; width: 10px; filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-opacity: 0; -khtml-opacity: 0; -moz-opacity: 0; -ms-opacity: 0; -o-opacity: 0; opacity: 0; -webkit-transition: opacity 333ms ease, width 0ms 333ms; -khtml-transition: opacity 333ms ease, width 0ms 333ms; -moz-transition: opacity 333ms ease, width 0ms 333ms; -ms-transition: opacity 333ms ease, width 0ms 333ms; -o-transition: opacity 333ms ease, width 0ms 333ms; transition: opacity 333ms ease, width 0ms 333ms; } body.mobile .side-nav.wrapper .menu-expand-container { display: block; position: absolute; width: 20px; top: 7px; right: -20px; background: rgba(35, 47, 64, 0.9); border-radius: 0 5px 5px 0; color: #fff; -webkit-transition: background 333ms ease, box-shadow 333ms ease, color 333ms ease; -khtml-transition: background 333ms ease, box-shadow 333ms ease, color 333ms ease; -moz-transition: background 333ms ease, box-shadow 333ms ease, color 333ms ease; -ms-transition: background 333ms ease, box-shadow 333ms ease, color 333ms ease; -o-transition: background 333ms ease, box-shadow 333ms ease, color 333ms ease; transition: background 333ms ease, box-shadow 333ms ease, color 333ms ease; } body.mobile .side-nav.wrapper .menu-expand { display: block; height: 35px; width: 20px; } body.mobile .side-nav.wrapper.open { left: 0; } body.mobile .side-nav.wrapper.open, body.mobile .side-nav.wrapper.dragging { box-shadow: 0 0 10px rgba(5, 5, 5, 0.4); } body.mobile .side-nav.wrapper.open .menu-backdrop, body.mobile .side-nav.wrapper.dragging .menu-backdrop { width: 100%; filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; -webkit-opacity: 1; -khtml-opacity: 1; -moz-opacity: 1; -ms-opacity: 1; -o-opacity: 1; opacity: 1; -webkit-transition: opacity 333ms ease; -khtml-transition: opacity 333ms ease; -moz-transition: opacity 333ms ease; -ms-transition: opacity 333ms ease; -o-transition: opacity 333ms ease; transition: opacity 333ms ease; } body.mobile .side-nav.wrapper.open div.menu-expand-container, body.mobile .side-nav.wrapper.dragging div.menu-expand-container { background: #fff; color: #7985a3; box-shadow: 0 0 10px rgba(5, 5, 5, 0.4); } body.mobile .select-mode .side-nav.wrapper .menu-expand-container { background: transparent; } body.tablet .side-nav.wrapper, body.desktop .side-nav.wrapper { /* TODO: This experience is being revised. Leaving this out for now &.scrolled { position: fixed; top: $site-body-margin; bottom: $site-body-margin; margin-left: -10px; width: $side-nav-width-with-padding; border-radius: 5px 5px 0 0; @include add-animation(pop-out-fade-in, $standard-animation-duration, ease, 1); @include transition(box-shadow $standard-animation-duration ease); .menu-expand-container { display: block; position: relative; height: 45px; background: $color-white; padding: 10px; color: $color-text; border-radius: 5px 5px 0 0; border: 1px solid transparent; @include transition(border $standard-animation-duration ease); } .menu-expand { float: right; width: 25px; height: 25px; border-radius: 5px; box-shadow: 0 0 0 1px $color-border; @include transition(box-shadow $standard-animation-duration ease); } .back-to-top { display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; line-height: 25px; span { margin-right: 5px; } &:after { width: auto; } } .inner { overflow: hidden; height: 0; position: absolute; top: 45px; left: 0; right: 0; padding: 0 10px; opacity: 0; @include transition( height 0ms ease $standard-animation-duration, padding 0ms ease $standard-animation-duration, opacity $standard-animation-duration ease ); } &.open { box-shadow: 0 0 0 1px $color-border; .menu-expand-container { border-bottom: 1px solid $color-border; } .menu-expand { box-shadow: 0 0 0 transparent; } .inner { height: calc(100% - 45px); overflow-y: auto; padding: 10px; opacity: 1; @include transition( opacity $standard-animation-duration ease ); } } } * End commented scroll experience. To be uncommented later after revisions */ } body.tablet .side-nav.wrapper.scrolled .back-to-top, body.desktop .side-nav.wrapper.scrolled .back-to-top { display: block; position: fixed; top: 90px; padding: 10px; border-radius: 5px; width: 170px; background: #fff; -webkit-animation-name: pop-out-fade-in; -khtml-animation-name: pop-out-fade-in; -moz-animation-name: pop-out-fade-in; -ms-animation-name: pop-out-fade-in; -o-animation-name: pop-out-fade-in; animation-name: pop-out-fade-in; -webkit-animation-duration: 333ms; -khtml-animation-duration: 333ms; -moz-animation-duration: 333ms; -ms-animation-duration: 333ms; -o-animation-duration: 333ms; animation-duration: 333ms; -webkit-animation-timing-function: ease; -khtml-animation-timing-function: ease; -moz-animation-timing-function: ease; -ms-animation-timing-function: ease; -o-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-iteration-count: 1; -khtml-animation-iteration-count: 1; -moz-animation-iteration-count: 1; -ms-animation-iteration-count: 1; -o-animation-iteration-count: 1; animation-iteration-count: 1; z-index: 100; } body.tablet .side-nav.wrapper.scrolled .back-to-top span, body.desktop .side-nav.wrapper.scrolled .back-to-top span { margin-left: 10px; } .side-nav .side-nav { position: relative; overflow: visible; } .side-nav .side-nav + .side-nav { margin-top: 20px; } .side-nav + div .side-nav { margin-top: 20px; } .side-nav h5 { font-size: 0.7em; font-weight: 900; line-height: 2em; text-transform: uppercase; letter-spacing: 2px; opacity: 0.5; margin: 0; } .side-nav.histogram { margin-top: 20px; } @charset "UTF-8"; /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ /* ------------------------------------------------------------- Mixins meant to replace the use of z-index completely. These allow developers to focus on the intent of positioning as named layers. Each of these mixins accepts an $adjust value, which is there to allow you to prioritize multiple elements in the same layer. Mixins available: - layer-background Arguments: [$adjust] Adds approprite z-index value for elements that are meant to be below the page's main content - layer-midground Arguments: [$adjust] Adds appropriate z-index value for elements that are the page's primary content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that are meant to be priminent / above the main content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that should appear above everything else (IE - modals) ------------------------------------------------------------- */ .primary-nav .photos a:before, .primary-nav .family a:before, .primary-nav .groups a:before, .primary-nav .albums a:before, .primary-nav .autoalbums a:before, .primary-nav .people a:before, .primary-nav .places a:before, .primary-nav .trash a:before { font-family: "fontIcons"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; text-transform: none; } /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ .primary-nav .photos.active a { color: #3a88f5; background: #3a88f5; background: rgba(58, 136, 245, 0.15); } .primary-nav .photos a:before { content: "\E039"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; color: #3a88f5; } .primary-nav .photos a:hover, .primary-nav .photos a:focus { color: #3a88f5; } .primary-nav .family.active a { color: #3a88f5; background: #3a88f5; background: rgba(58, 136, 245, 0.15); } .primary-nav .family a:before { content: "\E022"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; color: #3a88f5; } .primary-nav .family a:hover, .primary-nav .family a:focus { color: #3a88f5; } .primary-nav .groups.active a { color: #3a88f5; background: #3a88f5; background: rgba(58, 136, 245, 0.15); } .primary-nav .groups a:before { content: "\E035"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; color: #3a88f5; } .primary-nav .groups a:hover, .primary-nav .groups a:focus { color: #3a88f5; } .primary-nav .albums { margin-top: 10px; } .primary-nav .albums.active a { color: #957BFF; background: #957BFF; background: rgba(149, 123, 255, 0.15); } .primary-nav .albums a:before { content: "\E003"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; color: #957BFF; } .primary-nav .albums a:hover, .primary-nav .albums a:focus { color: #957BFF; } .primary-nav .autoalbums.active a { color: #957BFF; background: #957BFF; background: rgba(149, 123, 255, 0.15); } .primary-nav .autoalbums a:before { content: "\E003"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; color: #957BFF; } .primary-nav .autoalbums a:hover, .primary-nav .autoalbums a:focus { color: #957BFF; } .primary-nav .people.active a { color: #fea083; background: #fea083; background: rgba(254, 160, 131, 0.15); } .primary-nav .people a:before { content: "\E021"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; color: #fea083; } .primary-nav .people a:hover, .primary-nav .people a:focus { color: #fea083; } .primary-nav .places.active a { color: #71DA60; background: #71DA60; background: rgba(113, 218, 96, 0.15); } .primary-nav .places a:before { content: "\E03E"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; color: #71DA60; } .primary-nav .places a:hover, .primary-nav .places a:focus { color: #71DA60; } .primary-nav .trash { margin-top: 10px; } .primary-nav .trash.active a { color: #777; background: #777; background: rgba(119, 119, 119, 0.15); } .primary-nav .trash a:before { content: "\E015"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; color: #777; } .primary-nav .trash a:hover, .primary-nav .trash a:focus { color: #777; } .primary-nav li { line-height: 2em; margin-bottom: 2px; position: relative; } .primary-nav li span { vertical-align: middle; } .primary-nav li.active { font-weight: 900; } .primary-nav a { border-radius: 3px; display: block; -webkit-transition: background 100ms ease-out, color 100ms ease-out; -khtml-transition: background 100ms ease-out, color 100ms ease-out; -moz-transition: background 100ms ease-out, color 100ms ease-out; -ms-transition: background 100ms ease-out, color 100ms ease-out; -o-transition: background 100ms ease-out, color 100ms ease-out; transition: background 100ms ease-out, color 100ms ease-out; } .primary-nav a:hover, .primary-nav a:focus { background: #F6F7FD; } .primary-nav a:before { width: 35px; text-align: center; } .primary-nav a .count-badge { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -khtml-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); right: 0px; } @charset "UTF-8"; /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ body.mobile .sort-filter .toggle, .sort-filter .toggle { display: inline-block; padding: 0 15px; height: 2.5em; line-height: 2.5em; border-radius: 4px; text-align: center; border: none; font-family: inherit; font-size: inherit; font-weight: bold; letter-spacing: 0.4px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.mobile .sort-filter .toggle:disabled, .sort-filter .toggle:disabled, body.mobile .sort-filter .disabled.toggle, .sort-filter .disabled.toggle { cursor: default; } body.mobile .sort-filter .toggle + a, .sort-filter .toggle + a, body.mobile .sort-filter .toggle + button, .sort-filter .toggle + button { margin-left: 15px; } body.mobile .sort-filter .toggle, .sort-filter .toggle { background: none; color: inherit; } .sort-filter .toggle:enabled:hover, .sort-filter .toggle:enabled:focus, .sort-filter .toggle:enabled:active, .sort-filter .toggle:enabled.active { color: inherit; background: none; } body.mobile .sort-filter .toggle { border: 1px solid #EEE; } /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ /* ------------------------------------------------------------- Mixins meant to replace the use of z-index completely. These allow developers to focus on the intent of positioning as named layers. Each of these mixins accepts an $adjust value, which is there to allow you to prioritize multiple elements in the same layer. Mixins available: - layer-background Arguments: [$adjust] Adds approprite z-index value for elements that are meant to be below the page's main content - layer-midground Arguments: [$adjust] Adds appropriate z-index value for elements that are the page's primary content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that are meant to be priminent / above the main content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that should appear above everything else (IE - modals) ------------------------------------------------------------- */ .sort-filter .toggle:after { font-family: "fontIcons"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; text-transform: none; } /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ .sort-filter { float: right; position: relative; z-index: 100; } .sort-filter.open { z-index: 200; } body.mobile .sort-filter, body.tablet .sort-filter { float: none; text-align: right; margin-bottom: 15px; display: block; } .sort-filter .expanded-nav { text-align: left; } .sort-filter .toggle { font-weight: normal; margin: 0; padding: 0 8px; color: #7985a3; } .sort-filter .toggle:after { content: "\E019"; font-size: 5px; line-height: 5px; vertical-align: middle; display: inline-block; margin-left: 10px; display: inline-block; vertical-align: middle; } .sort-filter li.active button { font-weight: bold; } body.mobile .sort-filter { float: none; display: block; } body.mobile .sort-filter .toggle { display: block; width: 100%; color: #7985a3; } .group-beta-apps-dialog .install-android, .group-beta-apps-dialog .install-ios { display: inline-block; padding: 0 15px; height: 2.5em; line-height: 2.5em; border-radius: 4px; text-align: center; border: none; font-family: inherit; font-size: inherit; font-weight: bold; letter-spacing: 0.4px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .group-beta-apps-dialog .install-android:disabled, .group-beta-apps-dialog .install-ios:disabled, .group-beta-apps-dialog .disabled.install-android, .group-beta-apps-dialog .disabled.install-ios { cursor: default; } .group-beta-apps-dialog .install-android + a, .group-beta-apps-dialog .install-ios + a, .group-beta-apps-dialog .install-android + button, .group-beta-apps-dialog .install-ios + button { margin-left: 15px; } .group-beta-apps-dialog .install-android, .group-beta-apps-dialog .install-ios { background: #FECB88; color: #765627; } .group-beta-apps-dialog .install-android:enabled:hover, .group-beta-apps-dialog .install-ios:enabled:hover { background-color: #F2B769; color: #765627; } .group-beta-apps-dialog .install-android:enabled:active, .group-beta-apps-dialog .install-ios:enabled:active, .group-beta-apps-dialog .install-android:enabled.active, .group-beta-apps-dialog .install-ios:enabled.active, .group-beta-apps-dialog .install-android:enabled:focus, .group-beta-apps-dialog .install-ios:enabled:focus { background-color: #ffeacf; color: #765627; } .group-beta-apps-dialog .install-android:disabled, .group-beta-apps-dialog .install-ios:disabled, .group-beta-apps-dialog .disabled.install-android, .group-beta-apps-dialog .disabled.install-ios { background-color: #fee1bb; } .group-beta-apps-dialog .secondary.install-android, .group-beta-apps-dialog .secondary.install-ios { background-color: #7985a3; color: #fff; font-weight: normal; } .group-beta-apps-dialog .secondary.install-android:enabled:hover, .group-beta-apps-dialog .secondary.install-ios:enabled:hover { color: #fff; background-color: #637090; } .group-beta-apps-dialog .secondary.install-android:enabled:focus, .group-beta-apps-dialog .secondary.install-ios:enabled:focus, .group-beta-apps-dialog .secondary.install-android:enabled:active, .group-beta-apps-dialog .secondary.install-ios:enabled:active, .group-beta-apps-dialog .secondary.install-android:enabled.active, .group-beta-apps-dialog .secondary.install-ios:enabled.active { background-color: #919bb4; color: #fff; } .group-beta-apps-dialog .secondary.install-android:disabled, .group-beta-apps-dialog .secondary.install-ios:disabled, .group-beta-apps-dialog .disabled.secondary.install-android, .group-beta-apps-dialog .disabled.secondary.install-ios { background-color: #e3e5ec; } .group-beta-apps-dialog .go-to-mobile { display: inline; color: #3d7eda; } .group-beta-apps-dialog .go-to-mobile:enabled:hover, .group-beta-apps-dialog .go-to-mobile:enabled:focus, .group-beta-apps-dialog .go-to-mobile:enabled:active, .group-beta-apps-dialog .go-to-mobile:enabled.active { color: #2565bf; } .group-beta-apps-dialog .go-to-mobile:disabled, .group-beta-apps-dialog .disabled.go-to-mobile { color: #3a89f6; } .group-beta-apps-dialog { text-align: center; width: 530px; font-size: 1.1em; line-height: 1.4em; } .group-beta-apps-dialog .dialog-content { padding: 30px 40px; } .group-beta-apps-dialog .left { text-align: left; } .group-beta-apps-dialog .install-android, .group-beta-apps-dialog .install-ios { margin-bottom: 15px; } .group-beta-apps-dialog p { margin-bottom: 30px; } .group-beta-apps-dialog ol { display: list; } .group-beta-apps-dialog li { display: list-item; list-style: decimal; margin-left: 1em; } .group-beta-apps-dialog li + li { margin-top: 5px; } .dialog.splash-dialog.iOS { height: 100%; } .dialog.splash-dialog.iOS .dialog-content { -webkit-overflow-scrolling: touch; overflow-y: scroll; max-height: calc(100% - 30px); margin: 15px 0; } .dialog.splash-dialog iframe { height: 55vh; width: 55vw; max-width: 1000px; } #album .details { margin-bottom: 15px; } #album .photos-grid { clear: both; } #album .face { width: 30px; height: 30px; vertical-align: middle; margin-right: 5px; } @charset "UTF-8"; /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ .album-head.edit-mode .save, .album-head.edit-mode .cancel { display: inline-block; padding: 0 15px; height: 2.5em; line-height: 2.5em; border-radius: 4px; text-align: center; border: none; font-family: inherit; font-size: inherit; font-weight: bold; letter-spacing: 0.4px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .album-head.edit-mode .save:disabled, .album-head.edit-mode .cancel:disabled, .album-head.edit-mode .disabled.save, .album-head.edit-mode .disabled.cancel { cursor: default; } .album-head.edit-mode .save + a, .album-head.edit-mode .cancel + a, .album-head.edit-mode .save + button, .album-head.edit-mode .cancel + button { margin-left: 15px; } .album-head.edit-mode .save { background: #FECB88; color: #765627; } .album-head.edit-mode .save:enabled:hover { background-color: #F2B769; color: #765627; } .album-head.edit-mode .save:enabled:active, .album-head.edit-mode .save:enabled.active, .album-head.edit-mode .save:enabled:focus { background-color: #ffeacf; color: #765627; } .album-head.edit-mode .save:disabled, .album-head.edit-mode .disabled.save { background-color: #fee1bb; } .album-head.edit-mode .secondary.save { background-color: #7985a3; color: #fff; font-weight: normal; } .album-head.edit-mode .secondary.save:enabled:hover { color: #fff; background-color: #637090; } .album-head.edit-mode .secondary.save:enabled:focus, .album-head.edit-mode .secondary.save:enabled:active, .album-head.edit-mode .secondary.save:enabled.active { background-color: #919bb4; color: #fff; } .album-head.edit-mode .secondary.save:disabled, .album-head.edit-mode .disabled.secondary.save { background-color: #e3e5ec; } .album-head.edit-mode .cancel { background: none; color: inherit; } .album-head.edit-mode .cancel:enabled:hover, .album-head.edit-mode .cancel:enabled:focus, .album-head.edit-mode .cancel:enabled:active, .album-head.edit-mode .cancel:enabled.active { color: inherit; background: none; } /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ /* ------------------------------------------------------------- Mixins meant to replace the use of z-index completely. These allow developers to focus on the intent of positioning as named layers. Each of these mixins accepts an $adjust value, which is there to allow you to prioritize multiple elements in the same layer. Mixins available: - layer-background Arguments: [$adjust] Adds approprite z-index value for elements that are meant to be below the page's main content - layer-midground Arguments: [$adjust] Adds appropriate z-index value for elements that are the page's primary content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that are meant to be priminent / above the main content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that should appear above everything else (IE - modals) ------------------------------------------------------------- */ body.mobile .album-head.edit-mode .cancel:before, body.mobile .album-head.edit-mode .save:before, .album-head .rename:before { font-family: "fontIcons"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; text-transform: none; } /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ .album-head { border-bottom: 1px solid #EEE; } body.mobile .album-head.edit-mode h1 { padding: 0; text-align: left; } body.mobile .album-head.edit-mode .cancel { padding: 0; } body.mobile .album-head.edit-mode .cancel:before { content: "\E070"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; } body.mobile .album-head.edit-mode .cancel span { display: none; } body.mobile .album-head.edit-mode .save:before { content: "\E00D"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; } body.mobile .album-head.edit-mode .save span { display: none; } .album-head.edit-mode input { height: 80px; font: inherit; background: none; border: none; color: inherit; width: 100%; text-align: inherit; } .album-head.edit-mode input:focus { outline: none; } .album-head.edit-mode ::-webkit-input-placeholder { color: #6ba2f6; } .album-head.edit-mode ::-moz-placeholder { color: #6ba2f6; } .album-head.edit-mode :-ms-input-placeholder { color: #6ba2f6; } .album-head .rename:before { content: "\E04F"; font-size: 16px; line-height: 16px; vertical-align: middle; display: inline-block; vertical-align: middle; } body.desktop .album-head .addPhotos:before { display: none !important; } body.desktop .album-head .addPhotos .label { margin: 0; } @charset "UTF-8"; /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ /* ------------------------------------------------------------- Mixins meant to replace the use of z-index completely. These allow developers to focus on the intent of positioning as named layers. Each of these mixins accepts an $adjust value, which is there to allow you to prioritize multiple elements in the same layer. Mixins available: - layer-background Arguments: [$adjust] Adds approprite z-index value for elements that are meant to be below the page's main content - layer-midground Arguments: [$adjust] Adds appropriate z-index value for elements that are the page's primary content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that are meant to be priminent / above the main content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that should appear above everything else (IE - modals) ------------------------------------------------------------- */ /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ #autoalbum .details { margin-bottom: 15px; } #autoalbum .photos-grid { clear: both; } #autoalbum .face { width: 30px; height: 30px; vertical-align: middle; margin-right: 5px; } #autoalbum .album-head-container { position: fixed; left: 0px; right: 0px; background: white; top: 75px; padding: 0px 15px; z-index: 180; } #autoalbum .details { position: relative; top: 65px; } #autoalbum .details.with-review { top: 127px; } #autoalbum .secondary-head { top: 0px; } #autoalbum .selection-header .select-all { display: none; } @charset "UTF-8"; /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ /* ------------------------------------------------------------- Mixins meant to replace the use of z-index completely. These allow developers to focus on the intent of positioning as named layers. Each of these mixins accepts an $adjust value, which is there to allow you to prioritize multiple elements in the same layer. Mixins available: - layer-background Arguments: [$adjust] Adds approprite z-index value for elements that are meant to be below the page's main content - layer-midground Arguments: [$adjust] Adds appropriate z-index value for elements that are the page's primary content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that are meant to be priminent / above the main content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that should appear above everything else (IE - modals) ------------------------------------------------------------- */ /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ .auto-album-image-node .review-detail { position: absolute; bottom: 15px; right: 15px; padding: 5px; border-radius: 5px; z-index: 302; background: #3d7eda; color: #fff; opacity: 0.6; } @charset "UTF-8"; /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ #albums .amazon-drive-album button { display: inline-block; padding: 0 15px; height: 2.5em; line-height: 2.5em; border-radius: 4px; text-align: center; border: none; font-family: inherit; font-size: inherit; font-weight: bold; letter-spacing: 0.4px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #albums .amazon-drive-album button:disabled, #albums .amazon-drive-album button.disabled { cursor: default; } #albums .amazon-drive-album button + a, #albums .amazon-drive-album button + button { margin-left: 15px; } #albums .amazon-drive-album button { background-color: #7985a3; color: #fff; font-weight: normal; } #albums .amazon-drive-album button:enabled:hover { color: #fff; background-color: #637090; } #albums .amazon-drive-album button:enabled:focus, #albums .amazon-drive-album button:enabled:active, #albums .amazon-drive-album button:enabled.active { background-color: #919bb4; color: #fff; } #albums .amazon-drive-album button:disabled, #albums .amazon-drive-album button.disabled { background-color: #e3e5ec; } /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ /* ------------------------------------------------------------- Mixins meant to replace the use of z-index completely. These allow developers to focus on the intent of positioning as named layers. Each of these mixins accepts an $adjust value, which is there to allow you to prioritize multiple elements in the same layer. Mixins available: - layer-background Arguments: [$adjust] Adds approprite z-index value for elements that are meant to be below the page's main content - layer-midground Arguments: [$adjust] Adds appropriate z-index value for elements that are the page's primary content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that are meant to be priminent / above the main content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that should appear above everything else (IE - modals) ------------------------------------------------------------- */ #albums .amazon-drive-album h3:before { font-family: "fontIcons"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; text-transform: none; } /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ #albums .infinite-scroll-list { clear: both; } #albums .page, #albums .section-photos { margin: 0; } #albums .photo-grid-item { min-height: 270px; height: 270px; } .infinite-scroll-list #albums .photo-grid-item { width: 33% !important; } body.tablet #albums .photo-grid-item { min-height: 200px; } body.mobile #albums .photo-grid-item { min-height: 250px; } .infinite-scroll-list body.mobile #albums .photo-grid-item { width: 100%; } #albums .amazon-drive-album { max-width: 800px; border: 2px solid #EEE; border-radius: 4px; padding: 25px; margin: 0 auto; margin-top: 15px; } #albums .amazon-drive-album h3 { font-size: 16px; line-height: 20px; display: inline-block; font-weight: bold; margin: 0 15px; padding: 8px 0 0 35px; position: relative; display: inline-block; } #albums .amazon-drive-album h3:before { content: "\E003"; font-size: 24px; line-height: 24px; vertical-align: middle; display: inline-block; position: absolute; top: 0; left: 0; height: 35px; line-height: 35px; } #albums .amazon-drive-album .columns .column { vertical-align: baseline; } body.mobile #albums .amazon-drive-album { text-align: center; } body.mobile #albums .amazon-drive-album h3 { margin: 0 0 15px 0; padding: 0; } body.mobile #albums .amazon-drive-album h3:before { display: none; } @charset "UTF-8"; /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ .sectioned-scroll-list:after { content: ''; display: block; clear: both; } /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ .sectioned-scroll-list:after { content: ''; display: block; clear: both; } /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ /* ------------------------------------------------------------- Mixins meant to replace the use of z-index completely. These allow developers to focus on the intent of positioning as named layers. Each of these mixins accepts an $adjust value, which is there to allow you to prioritize multiple elements in the same layer. Mixins available: - layer-background Arguments: [$adjust] Adds approprite z-index value for elements that are meant to be below the page's main content - layer-midground Arguments: [$adjust] Adds appropriate z-index value for elements that are the page's primary content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that are meant to be priminent / above the main content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that should appear above everything else (IE - modals) ------------------------------------------------------------- */ /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ .sectioned-scroll-list { top: -22px; position: relative; } .sectioned-scroll-list .section-wrapper { position: absolute; width: 100%; } .sectioned-scroll-list .placeholder section { float: none; } .sectioned-scroll-list section { float: left; margin: 0 0 15px 0; } .sectioned-scroll-list section h3 { white-space: nowrap; position: relative; height: 30px; font-size: 1em; font-weight: bold; color: #7985a3; padding: 0; margin: 22px 0 15px; margin-left: 4px; } #albums .sectioned-scroll-list section h3 { margin-left: 6px; } .sectioned-scroll-list section h3 .section-badges { margin-right: 20px; position: relative; -webkit-transition: margin-right 333ms ease; -khtml-transition: margin-right 333ms ease; -moz-transition: margin-right 333ms ease; -ms-transition: margin-right 333ms ease; -o-transition: margin-right 333ms ease; transition: margin-right 333ms ease; } .sectioned-scroll-list section h3 .section-badges .badge-wrapper { position: relative; display: inline-block; vertical-align: middle; white-space: nowrap; width: 20px; -webkit-transition: width 333ms ease; -khtml-transition: width 333ms ease; -moz-transition: width 333ms ease; -ms-transition: width 333ms ease; -o-transition: width 333ms ease; transition: width 333ms ease; } .sectioned-scroll-list section h3 .section-badges .badge-wrapper .face { vertical-align: middle; margin-right: -10px; width: 30px; height: 30px; -webkit-transition: margin-right 333ms ease; -khtml-transition: margin-right 333ms ease; -moz-transition: margin-right 333ms ease; -ms-transition: margin-right 333ms ease; -o-transition: margin-right 333ms ease; transition: margin-right 333ms ease; } .sectioned-scroll-list section h3 .section-badges .badge-wrapper .face.default { background: #fff; } .sectioned-scroll-list section h3 .section-badges .badge-wrapper .preload-image { width: 30px; height: 30px; } .sectioned-scroll-list section h3 .section-badges :first-child { z-index: 10; } .sectioned-scroll-list section h3 .section-badges :nth-child(2) { z-index: 9; } .sectioned-scroll-list section h3 .section-badges :nth-child(3) { z-index: 8; } .sectioned-scroll-list section h3 .section-badges :nth-child(4) { z-index: 7; } .sectioned-scroll-list section h3 .section-badges :nth-child(5) { z-index: 6; } .sectioned-scroll-list section h3 .section-badges :nth-child(6) { z-index: 5; } .sectioned-scroll-list section h3 .section-date > span { display: inline-block; overflow: hidden; vertical-align: middle; -webkit-transition: all 333ms ease; -khtml-transition: all 333ms ease; -moz-transition: all 333ms ease; -ms-transition: all 333ms ease; -o-transition: all 333ms ease; transition: all 333ms ease; } .sectioned-scroll-list section h3 .section-date .long { max-width: 0; opacity: 0; } .sectioned-scroll-list section h3 .section-date .short { max-width: 78px; opacity: 1; } .sectioned-scroll-list section h3 .section-date .expand { max-width: 0; opacity: 0; } .sectioned-scroll-list section h3:hover .section-badges { margin-right: 10px; } .sectioned-scroll-list section h3:hover .section-badges .badge-wrapper { width: 34px; } .sectioned-scroll-list section .section-count { font-weight: lighter; color: #a6aec0; } .sectioned-scroll-list section .section-count:before { content: " \2014 "; } .sectioned-scroll-list section .section-page { position: absolute; width: 100%; } .sectioned-scroll-list section .section-photos { position: relative; } body.mobile .sectioned-scroll-list section .section-count, body.tablet .sectioned-scroll-list section .section-count { display: block; } body.mobile .sectioned-scroll-list section .section-count:before, body.tablet .sectioned-scroll-list section .section-count:before { display: none; } body.mobile .sectioned-scroll-list section .section-badges { display: none; } body.mobile .sectioned-scroll-list section .section-date { display: block; } body.mobile .sectioned-scroll-list section h3 { margin-bottom: 10px; } body.tablet .sectioned-scroll-list section .section-text-wrapper { display: inline-block; } @charset "UTF-8"; /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ /* ------------------------------------------------------------- Mixins meant to replace the use of z-index completely. These allow developers to focus on the intent of positioning as named layers. Each of these mixins accepts an $adjust value, which is there to allow you to prioritize multiple elements in the same layer. Mixins available: - layer-background Arguments: [$adjust] Adds approprite z-index value for elements that are meant to be below the page's main content - layer-midground Arguments: [$adjust] Adds appropriate z-index value for elements that are the page's primary content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that are meant to be priminent / above the main content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that should appear above everything else (IE - modals) ------------------------------------------------------------- */ /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ .section-selection .selector { display: inline-block; } .section-selection.non-selectable { cursor: default; } .section-selection.non-selectable:hover .selector { display: none; } .section-selection .selector, .section-selection .selector.selected, .section-selection:hover .selector, .section-selection.selected .selector, .select-mode .section-selection .selector { width: 0; height: auto; overflow: hidden; position: static; vertical-align: middle; opacity: 0; -webkit-transition: width 333ms ease 150ms, opacity 150ms ease; -khtml-transition: width 333ms ease 150ms, opacity 150ms ease; -moz-transition: width 333ms ease 150ms, opacity 150ms ease; -ms-transition: width 333ms ease 150ms, opacity 150ms ease; -o-transition: width 333ms ease 150ms, opacity 150ms ease; transition: width 333ms ease 150ms, opacity 150ms ease; } .section-selection .selector:after, .section-selection .selector.selected:after, .section-selection:hover .selector:after, .section-selection.selected .selector:after, .select-mode .section-selection .selector:after { display: none; } .section-selection .selector:before, .section-selection .selector.selected:before, .section-selection:hover .selector:before, .section-selection.selected .selector:before, .select-mode .section-selection .selector:before { width: 30px; height: 30px; line-height: 28px; position: static; color: #bbc1d0; border: 2px solid #bbc1d0; } .section-selection:hover .selector, .section-selection.selected .selector, .select-mode .section-selection .selector { width: 35px; opacity: 1; -webkit-transition: width 333ms ease, opacity 150ms ease 150ms; -khtml-transition: width 333ms ease, opacity 150ms ease 150ms; -moz-transition: width 333ms ease, opacity 150ms ease 150ms; -ms-transition: width 333ms ease, opacity 150ms ease 150ms; -o-transition: width 333ms ease, opacity 150ms ease 150ms; transition: width 333ms ease, opacity 150ms ease 150ms; } .section-selection .selector.selected:before { color: #fff; border-color: #3d7eda; box-shadow: inset 0 0 0 2px #fff; background: #3d7eda; } body.mobile .section-selection .selector { display: none; } body.tablet .section-selection .selector { vertical-align: bottom; } @charset "UTF-8"; /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ /* ------------------------------------------------------------- Mixins meant to replace the use of z-index completely. These allow developers to focus on the intent of positioning as named layers. Each of these mixins accepts an $adjust value, which is there to allow you to prioritize multiple elements in the same layer. Mixins available: - layer-background Arguments: [$adjust] Adds approprite z-index value for elements that are meant to be below the page's main content - layer-midground Arguments: [$adjust] Adds appropriate z-index value for elements that are the page's primary content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that are meant to be priminent / above the main content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that should appear above everything else (IE - modals) ------------------------------------------------------------- */ /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ .scroll-scrubber { position: fixed; top: 0; right: 0; bottom: 0; width: 25px; background: rgba(255, 255, 255, 0.95); color: #7985a3; font-size: 0.8em; font-weight: bold; z-index: 101; -webkit-transition: width 333ms ease; -khtml-transition: width 333ms ease; -moz-transition: width 333ms ease; -ms-transition: width 333ms ease; -o-transition: width 333ms ease; transition: width 333ms ease; } .scroll-scrubber .container { cursor: pointer; position: absolute; top: 105px; bottom: 15px; right: 5px; left: 5px; } .scroll-scrubber .marker { position: absolute; top: 0; width: 100%; height: 2px; background: #48a3c6; z-index: 200; } .scroll-scrubber.dragging .marker:not(.static) { background: #232f40; } .scroll-scrubber .marker-label { pointer-events: none; margin-right: 15px; border-radius: 5px; background: #232f40; color: #fff; padding: 10px 15px; display: block; white-space: nowrap; right: -1000px; -webkit-transition: opacity 333ms ease, right 0ms 333ms; -khtml-transition: opacity 333ms ease, right 0ms 333ms; -moz-transition: opacity 333ms ease, right 0ms 333ms; -ms-transition: opacity 333ms ease, right 0ms 333ms; -o-transition: opacity 333ms ease, right 0ms 333ms; transition: opacity 333ms ease, right 0ms 333ms; filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-opacity: 0; -khtml-opacity: 0; -moz-opacity: 0; -ms-opacity: 0; -o-opacity: 0; opacity: 0; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -khtml-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .scroll-scrubber .marker-label .caret { position: absolute; height: 100%; display: block; right: -4px; top: 0; width: 10px; } .scroll-scrubber .marker-label .caret:before { content: ''; display: block; -webkit-transition: border-color 333ms ease; -khtml-transition: border-color 333ms ease; -moz-transition: border-color 333ms ease; -ms-transition: border-color 333ms ease; -o-transition: border-color 333ms ease; transition: border-color 333ms ease; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -khtml-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); border-left: 10px solid transparent; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 10px solid transparent; border-left: 10px solid #232f40; } .scroll-scrubber.visible .marker-label { right: 100%; filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; -webkit-opacity: 1; -khtml-opacity: 1; -moz-opacity: 1; -ms-opacity: 1; -o-opacity: 1; opacity: 1; -webkit-transition: opacity 333ms ease; -khtml-transition: opacity 333ms ease; -moz-transition: opacity 333ms ease; -ms-transition: opacity 333ms ease; -o-transition: opacity 333ms ease; transition: opacity 333ms ease; } .scroll-scrubber .histogram-scrubber { position: absolute; top: 0; bottom: 0; right: 0; left: 0; } .scroll-scrubber .histogram-scrubber li { height: 1px; display: block; position: absolute; width: 100%; } .scroll-scrubber .histogram-scrubber li:before { content: ''; display: block; height: 1px; background: #e5e7ec; width: 55%; margin: 0 auto; } .scroll-scrubber .histogram-scrubber li.year:before { background: #b9becc; } .scroll-scrubber .histogram-scrubber li .label { position: absolute; bottom: 0px; display: block; width: 100%; text-align: center; line-height: 20px; background: #F6F7FD; border-radius: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-opacity: 0; -khtml-opacity: 0; -moz-opacity: 0; -ms-opacity: 0; -o-opacity: 0; opacity: 0; -webkit-transition: opacity 333ms ease; -khtml-transition: opacity 333ms ease; -moz-transition: opacity 333ms ease; -ms-transition: opacity 333ms ease; -o-transition: opacity 333ms ease; transition: opacity 333ms ease; } .scroll-scrubber .histogram-scrubber li.month .label { display: none; } .scroll-scrubber .histogram-scrubber li.year { z-index: 100; } .scroll-scrubber .histogram-scrubber li.overlap .label { display: none; } .scroll-scrubber .histogram-scrubber.single-year li.month:not(.overlap) span { display: block; } body.xlarge .scroll-scrubber { width: 55px; } body.xlarge .scroll-scrubber .histogram-scrubber .label { filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; -webkit-opacity: 1; -khtml-opacity: 1; -moz-opacity: 1; -ms-opacity: 1; -o-opacity: 1; opacity: 1; } .scroll-scrubber.dragging { width: 55px; } .scroll-scrubber.dragging .histogram-scrubber .label { filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; -webkit-opacity: 1; -khtml-opacity: 1; -moz-opacity: 1; -ms-opacity: 1; -o-opacity: 1; opacity: 1; } @charset "UTF-8"; /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ /* ------------------------------------------------------------- Mixins meant to replace the use of z-index completely. These allow developers to focus on the intent of positioning as named layers. Each of these mixins accepts an $adjust value, which is there to allow you to prioritize multiple elements in the same layer. Mixins available: - layer-background Arguments: [$adjust] Adds approprite z-index value for elements that are meant to be below the page's main content - layer-midground Arguments: [$adjust] Adds appropriate z-index value for elements that are the page's primary content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that are meant to be priminent / above the main content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that should appear above everything else (IE - modals) ------------------------------------------------------------- */ .create-amazon-drive-album-dialog .create-amazon-drive-album-search button.search:before, .create-amazon-drive-album-dialog .folder-item .name:before, .create-amazon-drive-album-dialog .folder-item .selector:before, .create-amazon-drive-album-dialog .dialog-head:before { font-family: "fontIcons"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; text-transform: none; } /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins meant to replace the use of z-index completely. These allow developers to focus on the intent of positioning as named layers. Each of these mixins accepts an $adjust value, which is there to allow you to prioritize multiple elements in the same layer. Mixins available: - layer-background Arguments: [$adjust] Adds approprite z-index value for elements that are meant to be below the page's main content - layer-midground Arguments: [$adjust] Adds appropriate z-index value for elements that are the page's primary content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that are meant to be priminent / above the main content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that should appear above everything else (IE - modals) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ .create-amazon-drive-album-dialog .create-amazon-drive-album-search button.search:before, .create-amazon-drive-album-dialog .folder-item .name:before, .create-amazon-drive-album-dialog .folder-item .selector:before, .create-amazon-drive-album-dialog .dialog-head:before { font-family: "fontIcons"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; text-transform: none; } /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ .create-amazon-drive-album-dialog { width: 400px; } .create-amazon-drive-album-dialog .create-amazon-drive-album-search { height: 60px; background: rgba(187, 193, 208, 0.15); } .create-amazon-drive-album-dialog .create-amazon-drive-album-search input { height: 33px; border: none; border-top-left-radius: 5px; border-bottom-left-radius: 5px; width: calc(100% - 100px); position: absolute; top: 14px; left: 25px; padding: 0 1em; font-size: 13px; } .create-amazon-drive-album-dialog .create-amazon-drive-album-search input:focus { outline: none; } .create-amazon-drive-album-dialog .create-amazon-drive-album-search button.search { position: absolute; top: 14px; height: 33px; right: 25px; width: 50px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 0; border-bottom-left-radius: 0; } .create-amazon-drive-album-dialog .create-amazon-drive-album-search button.search:before { content: "\E052"; font-size: 18px; line-height: 18px; vertical-align: middle; display: inline-block; text-align: center; width: 100%; color: #765627; } .create-amazon-drive-album-dialog .folder-item { min-height: 60px; max-height: 60px; height: 60px; width: 100% !important; line-height: 60px; border-bottom: 1px solid #EEE; padding: 0 28px; display: block; position: relative; } .create-amazon-drive-album-dialog .folder-item .name { display: inline-block; color: #7985a3; width: calc(100% - 28px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .create-amazon-drive-album-dialog .folder-item .name:before { content: "\E032"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; margin-right: 10px; } .create-amazon-drive-album-dialog .folder-item .selector { width: 14px; height: 14px; right: 28px; left: initial; border: 1px solid #7985a3; border-radius: 3px; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -khtml-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .create-amazon-drive-album-dialog .folder-item .selector:before { display: none; background: transparent; color: #fff; border: none; box-shadow: none; position: absolute; top: 0; left: 0; width: 12px; height: 12px; font-size: 8px; transform: translateY(-56%); } .create-amazon-drive-album-dialog .folder-item .selector:before:before { content: "\E00D"; font-size: 8px; line-height: 8px; vertical-align: middle; display: inline-block; } .create-amazon-drive-album-dialog .folder-item .selector:after { content: ''; position: absolute; width: 400%; height: 400%; transform: translateX(-50%) translateY(-50%); top: 50%; left: 50%; } .create-amazon-drive-album-dialog .folder-item .selector.selected { background: #7985a3; } .create-amazon-drive-album-dialog .folder-item .selector.selected:before { display: block; } .create-amazon-drive-album-dialog .folder-item .selector.selected:after { border: none; } .create-amazon-drive-album-dialog .dialog-head:before { content: "\E05A"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; } .create-amazon-drive-album-dialog .dialog-content { padding: 0; max-height: calc(100% - 60px); } .create-amazon-drive-album-dialog .dialog-head:before { content: "\E05A"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; } .create-amazon-drive-album-dialog .create-albums { text-align: center; height: 80px; background: rgba(187, 193, 208, 0.15); position: relative; } .create-amazon-drive-album-dialog .create-albums button { position: absolute; top: 20px; bottom: 20px; left: 28px; right: 28px; width: calc(100% - 56px); height: 40px; } .create-amazon-drive-album-dialog .page { min-height: 91px; } .create-amazon-drive-album-dialog .infinite-scroll-list { top: 0; } .create-amazon-drive-album-dialog .scroller { height: 400px; } .create-amazon-drive-album-dialog .empty-state .no-photo-scene { margin: 15px 0; } @charset "UTF-8"; /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ /* ------------------------------------------------------------- Mixins meant to replace the use of z-index completely. These allow developers to focus on the intent of positioning as named layers. Each of these mixins accepts an $adjust value, which is there to allow you to prioritize multiple elements in the same layer. Mixins available: - layer-background Arguments: [$adjust] Adds approprite z-index value for elements that are meant to be below the page's main content - layer-midground Arguments: [$adjust] Adds appropriate z-index value for elements that are the page's primary content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that are meant to be priminent / above the main content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that should appear above everything else (IE - modals) ------------------------------------------------------------- */ .auto-album-node .review-detail:before { font-family: "fontIcons"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; text-transform: none; } /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ .auto-album-node .review-detail { position: absolute; right: 15px; top: 15px; padding: 5px; border-radius: 5px; z-index: 302; background: #050505; color: #3d7eda; opacity: 0.6; } .auto-album-node .review-detail:before { content: "\E00D"; font-size: 15px; line-height: 15px; vertical-align: middle; display: inline-block; } .auto-album-node .review-detail span { margin: 5px; } #photos .notification-widget-container { display: flex; } #photos .notification-widget-container > div { flex-basis: 50%; flex-grow: 1; flex-shrink: 1; } #photos .notification-widget-container > div + div { margin-left: 15px; } #photos .notification-widget-container .this-day-widget { flex-basis: 70%; } @charset "UTF-8"; /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ /* ------------------------------------------------------------- Mixins meant to replace the use of z-index completely. These allow developers to focus on the intent of positioning as named layers. Each of these mixins accepts an $adjust value, which is there to allow you to prioritize multiple elements in the same layer. Mixins available: - layer-background Arguments: [$adjust] Adds approprite z-index value for elements that are meant to be below the page's main content - layer-midground Arguments: [$adjust] Adds appropriate z-index value for elements that are the page's primary content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that are meant to be priminent / above the main content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that should appear above everything else (IE - modals) ------------------------------------------------------------- */ /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ .this-day-widget { position: relative; margin-bottom: 20px; padding-top: 20px; height: 195px; border: 1px solid #e6e6e6; border-radius: 4px; overflow: hidden; background: url(https://images-na.ssl-images-amazon.com/images/G/01/digital/photos/thisday_poloroids._V278012530_.png) 0 0 no-repeat; background-size: 963px 175px; } @media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) { .this-day-widget { background-image: url(https://images-na.ssl-images-amazon.com/images/G/01/digital/photos/thisday_poloroids2x._V278032385_.png); } } .this-day-widget .node { min-height: initial; } .this-day-widget .node .bg-image { border-radius: 4px; } .this-day-widget .node .play { pointer-events: none; } .this-day-widget .node .duration { display: none; } .this-day-widget .meta { display: inline-block; width: 200px; float: left; text-align: center; padding-top: 42px; } .this-day-widget .meta .day { font-size: 44px; color: #F28495; line-height: 40px; } .this-day-widget .meta .month { text-transform: uppercase; font-size: 12px; line-height: 18px; font-weight: bold; color: #cdd2db; } .this-day-widget .meta .text { font-size: 1em; font-weight: 900; margin: 10px 0 4px 0; } .this-day-widget .year { pointer-events: none; } .this-day-widget .mosaic-wrapper { position: absolute; left: 200px; top: 15px; bottom: 7px; right: 15px; } body.mobile .this-day-widget .meta { width: 100%; } body.mobile .this-day-widget .mosaic-wrapper { display: none; } @charset "UTF-8"; /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ /* ------------------------------------------------------------- Mixins meant to replace the use of z-index completely. These allow developers to focus on the intent of positioning as named layers. Each of these mixins accepts an $adjust value, which is there to allow you to prioritize multiple elements in the same layer. Mixins available: - layer-background Arguments: [$adjust] Adds approprite z-index value for elements that are meant to be below the page's main content - layer-midground Arguments: [$adjust] Adds appropriate z-index value for elements that are the page's primary content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that are meant to be priminent / above the main content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that should appear above everything else (IE - modals) ------------------------------------------------------------- */ .filters li button:after { font-family: "fontIcons"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; text-transform: none; } /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ .filters { padding-top: 5px; } .filters .heading { display: flex; flex-wrap: wrap; justify-content: space-between; } .filters .heading .clear { font-weight: normal; font-size: 12px; } .filters .show-more-list button { display: block; position: relative; border-radius: 4px; text-transform: capitalize; width: 170px; padding: 0 24px 0 10px; height: 30px; line-height: 30px; } .filters .show-more-list button .label { max-width: calc(100% - 4ch); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .filters.filter-people .show-more-list button { text-transform: none; } .filters.filter-people .show-more-list button .label { max-width: calc(100% - 22px - 4ch); } .filters ul { margin-top: 5px; } .filters ul ul { margin-top: 0; } .filters li { display: block; margin-bottom: 1px; } .filters li button { color: #7985a3 !important; } .filters li button:hover { background: #F6F7FD; } .filters li button:after { content: "\E00D"; font-size: 8px; line-height: 8px; vertical-align: middle; display: inline-block; display: inline-block; color: #fff; background: #fff; vertical-align: middle; width: 14px; height: 14px; line-height: 14px; border-radius: 2px; border: 1px solid #bbc1d0; text-align: center; font-weight: 900; position: absolute; right: 10px; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -khtml-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .filters li button .label { max-width: 90px; display: inline-block; margin: 0; padding: 0 6px 0 0; vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .filters li button .count { font-weight: normal !important; font-size: 12px; color: #bbc1d0; } .filters li button .face { width: 22px; height: 22px; vertical-align: middle; position: relative; left: -5px; } .filters li.active > button { font-weight: bold; background: #eef2fc; } .filters li.active > button:after { background: #7985a3; border: none; } @charset "UTF-8"; /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ /* ------------------------------------------------------------- Mixins meant to replace the use of z-index completely. These allow developers to focus on the intent of positioning as named layers. Each of these mixins accepts an $adjust value, which is there to allow you to prioritize multiple elements in the same layer. Mixins available: - layer-background Arguments: [$adjust] Adds approprite z-index value for elements that are meant to be below the page's main content - layer-midground Arguments: [$adjust] Adds appropriate z-index value for elements that are the page's primary content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that are meant to be priminent / above the main content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that should appear above everything else (IE - modals) ------------------------------------------------------------- */ .show-more-list .show-more-button:after { font-family: "fontIcons"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; text-transform: none; } /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ .show-more-list .show-more-button { color: #bbc1d0; text-transform: none !important; } .show-more-list .show-more-button:after { content: "\E019"; font-size: 5px; line-height: 5px; vertical-align: middle; display: inline-block; margin-left: 8px; display: inline-block; vertical-align: middle; } .show-more-list .show-more-button:hover { color: #a6aec0; } .show-more-list .show-more-button.show-more:after { -webkit-transform: rotate(180deg); -khtml-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .histogram-group, .histogram-group li { display: block; margin: 0; padding: 0; } .histogram-group button { text-transform: none !important; } .histogram-group button:not(.show-more-button) { padding-right: 10px !important; } .histogram-group button:not(.show-more-button):before, .histogram-group button:not(.show-more-button):after { display: none !important; } .histogram-group button:not(.show-more-button) span.total { font-weight: normal; font-size: 12px; color: #bbc1d0; padding-left: 10px; } .histogram-group .histogram-group button { padding-left: 30px; } @charset "UTF-8"; .auto-albums-notification .clear-auto-album-suggestion:before, .auto-albums-notification .save-auto-album-suggestion:before { font-family: "fontIcons"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; text-transform: none; } /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ .auto-albums-notification { height: 195px; display: flex; flex-direction: row; padding: 15px; margin-bottom: 22px; border: 1px solid #e6e6e6; border-radius: 4px; position: relative; } .auto-albums-notification .album-cover { position: relative; width: 150px; height: 100%; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.15); } .auto-albums-notification .album-cover .preview { position: relative; width: 150px; height: 127px; display: inline-block; } .auto-albums-notification .album-cover .album-cover-text { text-align: center; display: block; font-size: 7px; height: 38px; line-height: 38px; } .auto-albums-notification .description { position: relative; justify-content: space-around; padding: 10px 25px 0; flex-grow: 1; text-align: center; } .auto-albums-notification .description .title { color: #f28495; } .auto-albums-notification .description .photobook-explanation { margin-top: 15px; } .auto-albums-notification .description .view-auto-album { color: #3d7eda; } .auto-albums-notification .inner-preview { position: relative; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.15); white-space: nowrap; } .auto-albums-notification .inner-preview:after { content: ''; height: 100%; position: absolute; top: 50%; left: 50%; -webkit-transform: translateY(-50%) translateX(-50%); -khtml-transform: translateY(-50%) translateX(-50%); -moz-transform: translateY(-50%) translateX(-50%); -ms-transform: translateY(-50%) translateX(-50%); -o-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); width: 1px; box-shadow: 0 0 20px black; display: block; background: rgba(0, 0, 0, 0.1); } .auto-albums-notification .inner-preview > div { position: relative; height: 100%; width: 166px; display: inline-block; } .auto-albums-notification .inner-preview .page-preview-image { position: absolute; top: 15px; bottom: 15px; left: 15px; right: 15px; } .auto-albums-notification .window-icons { position: absolute; top: 5px; right: 5px; flex-shrink: 1; } .auto-albums-notification .window-icons > * { display: inline; padding: 5px 10px; float: right; } .auto-albums-notification.full-size .window-icons { position: relative; padding-left: 10px; width: 87px; margin-top: -10px; margin-right: -10px; } .auto-albums-notification .clear-auto-album-suggestion:before { content: "\E070"; font-size: 17px; line-height: 17px; vertical-align: middle; display: inline-block; height: inherit; line-height: inherit; } .auto-albums-notification .save-auto-album-suggestion:before { content: "\E003"; font-size: 17px; line-height: 17px; vertical-align: middle; display: inline-block; height: inherit; line-height: inherit; } @charset "UTF-8"; /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ /* ------------------------------------------------------------- Mixins meant to replace the use of z-index completely. These allow developers to focus on the intent of positioning as named layers. Each of these mixins accepts an $adjust value, which is there to allow you to prioritize multiple elements in the same layer. Mixins available: - layer-background Arguments: [$adjust] Adds approprite z-index value for elements that are meant to be below the page's main content - layer-midground Arguments: [$adjust] Adds appropriate z-index value for elements that are the page's primary content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that are meant to be priminent / above the main content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that should appear above everything else (IE - modals) ------------------------------------------------------------- */ .family-members-widget .pending-invitations:before, .family-members-widget .max-invitations .name:before { font-family: "fontIcons"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; text-transform: none; } /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ .family-members-widget { display: block; text-align: center; margin: 8px 0 15px 0; } .family-members-widget h3 { font-size: 1.1em; display: inline-block; font-weight: bold; margin: 0; } body.mobile .family-members-widget h3 { margin-bottom: 5px; display: block; } body.mobile .family-members-widget .dash { display: none; } .family-members-widget .count { color: #a6aec0; font-size: 1.1em; } .family-members-widget .count:before { content: ' \2014 '; } body.mobile .family-members-widget .count:before { display: none; } .family-members-widget .member { display: inline-block; margin: 25px 10px 0 0; vertical-align: top; } body.mobile .family-members-widget .member { font-size: 11px; } .family-members-widget .invite-link .face { background: url(https://images-na.ssl-images-amazon.com/images/G/01/digital/photos/icons_avatar_invite.svg) 0 0 no-repeat; background-size: 100%; border-radius: 50%; } .family-members-widget .invite-link .name { font-weight: normal; } .family-members-widget .invite-link .member { margin-right: 0; } .family-members-widget .pending-invitations { margin-top: 10px; } .family-members-widget .pending-invitations:before { content: "\E013"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; margin-right: 5px; } .family-members-widget .max-invitations .name:before { content: "\E013"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; margin-right: 5px; } .family-members-widget .face { width: 90px; height: 90px; margin-bottom: 8px; } body.mobile .family-members-widget .face { width: 32px; height: 32px; } .family-members-widget .name { font-weight: bold; width: 117px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.mobile .family-members-widget .name { font-size: 12px; line-height: 14px; } @charset "UTF-8"; /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ /* ------------------------------------------------------------- Mixins meant to replace the use of z-index completely. These allow developers to focus on the intent of positioning as named layers. Each of these mixins accepts an $adjust value, which is there to allow you to prioritize multiple elements in the same layer. Mixins available: - layer-background Arguments: [$adjust] Adds approprite z-index value for elements that are meant to be below the page's main content - layer-midground Arguments: [$adjust] Adds appropriate z-index value for elements that are the page's primary content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that are meant to be priminent / above the main content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that should appear above everything else (IE - modals) ------------------------------------------------------------- */ .dialog.pending-invitations-dialog .invitation .resend .confirmation:before { font-family: "fontIcons"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; text-transform: none; } /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ .dialog.pending-invitations-dialog .dialog-content { padding: 0; } .dialog.pending-invitations-dialog .invitation { display: flex; justify-content: flex-end; padding: 40px 30px; } .dialog.pending-invitations-dialog .invitation button { padding: 0; height: 40px; width: 100%; } .dialog.pending-invitations-dialog .invitation .info { flex-grow: 2; margin-right: 15px; } .dialog.pending-invitations-dialog .invitation .info .email { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dialog.pending-invitations-dialog .invitation .actions { white-space: nowrap; text-align: center; } .dialog.pending-invitations-dialog .invitation .time-sent { font-size: 12px; } .dialog.pending-invitations-dialog .invitation .resend { width: 120px; display: inline-block; position: relative; } .dialog.pending-invitations-dialog .invitation .resend .confirmation:before { content: "\E012"; font-size: 14px; line-height: 14px; vertical-align: middle; display: inline-block; margin-right: 8px; } .dialog.pending-invitations-dialog .invitation .remove { width: 100px; } body.mobile .dialog.pending-invitations-dialog .invitation { flex-direction: column; padding: 20px 15px; } body.mobile .dialog.pending-invitations-dialog .invitation .info { margin-right: 0; text-align: center; } body.mobile .dialog.pending-invitations-dialog .invitation .actions { margin-top: 10px; } .dialog.pending-invitations-dialog .invitation + .invitation { border-top: 1px solid #EEE; } .dialog.pending-invitations-dialog .empty-state { padding: 15px 40px; text-align: center; } /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ .dialog.family-vault-education-dialog { width: 460px; } .dialog.family-vault-education-dialog .dialog-content { padding-left: 40px; padding-right: 40px; overflow: visible; } .dialog.family-vault-education-dialog .main-content { margin-bottom: 30px; } .dialog.family-vault-education-dialog .main-content img { width: 250px; } body.tablet .dialog.family-vault-education-dialog .main-content img, body.desktop .dialog.family-vault-education-dialog .main-content img { margin-top: -35px; } .dialog.family-vault-education-dialog section { display: inline-block; width: 50%; vertical-align: top; } body.mobile .dialog.family-vault-education-dialog section { width: 100%; margin-bottom: 15px; } body.tablet .dialog.family-vault-education-dialog h2, body.tablet .dialog.family-vault-education-dialog p, body.desktop .dialog.family-vault-education-dialog h2, body.desktop .dialog.family-vault-education-dialog p { text-align: left; } body.tablet .dialog.family-vault-education-dialog .column-1, body.desktop .dialog.family-vault-education-dialog .column-1 { padding-right: 15px; } body.tablet .dialog.family-vault-education-dialog .column-2, body.desktop .dialog.family-vault-education-dialog .column-2 { padding-left: 15px; } @charset "UTF-8"; /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ #group-detail header.group-heading .add-content .toggle, #group-detail header.group-heading .back, #group-detail header.group-heading .options .toggle { display: inline-block; padding: 0 15px; height: 2.5em; line-height: 2.5em; border-radius: 4px; text-align: center; border: none; font-family: inherit; font-size: inherit; font-weight: bold; letter-spacing: 0.4px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #group-detail header.group-heading .add-content .toggle:disabled, #group-detail header.group-heading .back:disabled, #group-detail header.group-heading .options .toggle:disabled, #group-detail header.group-heading .add-content .disabled.toggle, #group-detail header.group-heading .disabled.back, #group-detail header.group-heading .options .disabled.toggle { cursor: default; } #group-detail header.group-heading .add-content .toggle + a, #group-detail header.group-heading .back + a, #group-detail header.group-heading .options .toggle + a, #group-detail header.group-heading .add-content .toggle + button, #group-detail header.group-heading .back + button, #group-detail header.group-heading .options .toggle + button { margin-left: 15px; } #group-detail header.group-heading .add-content .toggle, #group-detail header.group-heading .back, #group-detail header.group-heading .options .toggle { background: none; color: inherit; } #group-detail header.group-heading .add-content .toggle:enabled:hover, #group-detail header.group-heading .back:enabled:hover, #group-detail header.group-heading .options .toggle:enabled:hover, #group-detail header.group-heading .add-content .toggle:enabled:focus, #group-detail header.group-heading .back:enabled:focus, #group-detail header.group-heading .options .toggle:enabled:focus, #group-detail header.group-heading .add-content .toggle:enabled:active, #group-detail header.group-heading .back:enabled:active, #group-detail header.group-heading .options .toggle:enabled:active, #group-detail header.group-heading .add-content .toggle:enabled.active, #group-detail header.group-heading .back:enabled.active, #group-detail header.group-heading .options .toggle:enabled.active { color: inherit; background: none; } #group-detail header.group-heading .add-content .toggle { border: 1px solid #EEE; } #group-detail header.group-heading .back:before, #group-detail header.group-heading .options .toggle:before, #group-detail header.group-heading .add-photos:before, #group-detail header.group-heading .add-albums:before, #group-detail header.group-heading .add-people:before, #group-detail header.group-heading .group-settings:before, #group-detail header.group-heading .delete-group:before, #group-detail header.group-heading .leave-group:before { font-family: "fontIcons"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; text-transform: none; } /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ #group-detail header.group-heading { color: #fff; padding: 25px; width: 100%; position: relative; left: -25px; margin-top: -30px; margin-bottom: 15px; height: 150px; box-sizing: content-box; } #group-detail header.group-heading .loading { position: absolute; } #group-detail header.group-heading .bg-image { background-size: cover !important; background-position: center center; } @media screen and (max-width: 700px) { #group-detail header.group-heading { margin-top: -15px; left: -10px; padding: 10px; height: 120px; } } #group-detail header.group-heading .avatars { position: absolute; top: 100%; left: 0; right: 0; text-align: center; margin: 0; margin-top: -32px; } @media screen and (min-width: 701px) { #group-detail header.group-heading .avatars li { width: 48px; height: 64px; } #group-detail header.group-heading .avatars li .customer-avatar, #group-detail header.group-heading .avatars li .add-members { width: 64px; height: 64px; } #group-detail header.group-heading .avatars li .fill span { font-size: 2em; } } @media screen and (max-width: 700px) { #group-detail header.group-heading .avatars { margin-top: 0; -webkit-transform: translateY(-50%); -khtml-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } } #group-detail header.group-heading .cover { overflow: hidden; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } #group-detail header.group-heading .cover:before { display: none; } #group-detail header.group-heading .cover:after { position: absolute; top: 0; left: 0; right: 0; bottom: 0; content: ''; background: rgba(35, 47, 64, 0.35); } @media screen and (min-width: 1400px) { #group-detail header.group-heading { margin-top: -29px; left: 0; box-sizing: border-box; height: 200px; } } #group-detail header.group-heading .details { text-align: center; margin: 0; height: auto; position: absolute; top: 50%; left: 50%; -webkit-transform: translateY(-50%) translateX(-50%); -khtml-transform: translateY(-50%) translateX(-50%); -moz-transform: translateY(-50%) translateX(-50%); -ms-transform: translateY(-50%) translateX(-50%); -o-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); } #group-detail header.group-heading .details h3 { text-shadow: 2px 2px 10px rgba(5, 5, 5, 0.3); color: #fff; margin: 0; padding: 0 50px; font-size: 2em; margin-bottom: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media screen and (max-width: 700px) { #group-detail header.group-heading .details h3 { padding: 0 15px; } } #group-detail header.group-heading .details ul { margin: 5px 0; } #group-detail header.group-heading .details .members { font-weight: bold; } #group-detail header.group-heading .group-node { display: static; } #group-detail header.group-heading .group-node .node:before { display: none; } #group-detail header.group-heading a, #group-detail header.group-heading button { position: relative; } #group-detail header.group-heading .back { float: left; padding-left: 0; } #group-detail header.group-heading .back:before { content: "\E007"; font-size: 10px; line-height: 10px; vertical-align: middle; display: inline-block; margin-right: 10px; } #group-detail header.group-heading .add-content .toggle { color: #fff !important; border-color: #fff; } #group-detail header.group-heading .options .toggle { margin-left: 15px; } #group-detail header.group-heading .options .toggle:before { content: "\E042"; font-size: 18px; line-height: 18px; vertical-align: middle; display: inline-block; color: #fff; font-weight: bold; } #group-detail header.group-heading .expandable-nav { display: inline-block; vertical-align: middle; float: right; } #group-detail header.group-heading .expandable-nav .expanded-nav { top: calc(100% + 10px); } #group-detail header.group-heading .expandable-nav .expanded-nav button:before { width: 20px; text-align: center; } #group-detail header.group-heading .expandable-nav.options .expanded-nav { right: -7px; } #group-detail header.group-heading .back, #group-detail header.group-heading .add-content .toggle, #group-detail header.group-heading .options .toggle { color: #fff; } #group-detail header.group-heading .back:hover, #group-detail header.group-heading .back:active, #group-detail header.group-heading .add-content .toggle:hover, #group-detail header.group-heading .add-content .toggle:active, #group-detail header.group-heading .options .toggle:hover, #group-detail header.group-heading .options .toggle:active { opacity: 0.7; } #group-detail header.group-heading .expandable-nav li button:before { margin-right: 10px; } #group-detail header.group-heading .add-photos:before { content: "\E048"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; } #group-detail header.group-heading .add-albums:before { content: "\E003"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; } #group-detail header.group-heading .add-people:before { content: "\E046"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; } #group-detail header.group-heading .group-settings:before { content: "\E055"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; } #group-detail header.group-heading .delete-group:before, #group-detail header.group-heading .leave-group:before { content: "\E015"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; } @media screen and (max-width: 700px) { #group-detail header.group-heading .add-content .toggle { border: none; } #group-detail header.group-heading .add-content .toggle:before { content: '+'; font-size: 2em; } #group-detail header.group-heading .back span, #group-detail header.group-heading .add-content .toggle span { display: none; } #group-detail header.group-heading .options .toggle { margin: 0; } } #group-detail nav.type { margin-bottom: 15px; white-space: nowrap; } #group-detail nav.type li, #group-detail nav.type a { display: inline-block; } #group-detail nav.type a { line-height: 3em; padding: 0 15px; } #group-detail nav.type a.active { color: #3d7eda; border-bottom: 4px solid #3d7eda; } @media screen and (min-width: 701px) { #group-detail .empty-state { margin-left: -200px; } } #group-detail .file-list-node { height: 270px; width: 33%; } @media screen and (min-width: 701px) and (max-width: 1024px) { #group-detail .file-list-node { height: 200px; } } @media screen and (max-width: 700px) { #group-detail .file-list-node { height: 250px; width: 100%; } } #group-detail .file-list-node .album-node { width: 100%; height: 100%; } @media screen and (min-width: 1025px) { #group-detail.albums .sort-filter { position: relative; top: -20px; } } .group-album .face { position: absolute; width: 30px; height: 30px; bottom: 20px; right: 0; } .group-album .details { width: calc(100% - 45px); } @charset "UTF-8"; /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ /* ------------------------------------------------------------- Mixins meant to replace the use of z-index completely. These allow developers to focus on the intent of positioning as named layers. Each of these mixins accepts an $adjust value, which is there to allow you to prioritize multiple elements in the same layer. Mixins available: - layer-background Arguments: [$adjust] Adds approprite z-index value for elements that are meant to be below the page's main content - layer-midground Arguments: [$adjust] Adds appropriate z-index value for elements that are the page's primary content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that are meant to be priminent / above the main content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that should appear above everything else (IE - modals) ------------------------------------------------------------- */ /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ #onboard-page h1 { color: #47A7BC; text-align: center; font-size: 18px; margin: 15px 0 8px; letter-spacing: 0.29px; line-height: 24px; font-weight: bold; } #onboard-page h1 { font-size: 1.5em; margin: 15px 0; } #onboard-page .onboard-body, #onboard-page .slide { text-align: center; } #onboard-page .onboard-body .onboard-continue, #onboard-page .slide .onboard-continue { margin-top: 15px; font-size: 0.9em; } #onboard-page .onboard-footer, #onboard-page .dialog-footer { text-align: center; margin: 36px 0; } #onboard-page img { max-width: 80%; } @charset "UTF-8"; /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ /* ------------------------------------------------------------- Mixins meant to replace the use of z-index completely. These allow developers to focus on the intent of positioning as named layers. Each of these mixins accepts an $adjust value, which is there to allow you to prioritize multiple elements in the same layer. Mixins available: - layer-background Arguments: [$adjust] Adds approprite z-index value for elements that are meant to be below the page's main content - layer-midground Arguments: [$adjust] Adds appropriate z-index value for elements that are the page's primary content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that are meant to be priminent / above the main content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that should appear above everything else (IE - modals) ------------------------------------------------------------- */ /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ #people .content-with-nav { padding-bottom: 180px; } #people .title { position: relative; height: 190px; background: url("https://images-na.ssl-images-amazon.com/images/G/01/digital/photos/web-people-header.png") center center no-repeat; background-size: 1150px 190px; } @media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) { #people .title { background-image: url("https://images-na.ssl-images-amazon.com/images/G/01/digital/photos/web-people-header2x.png"); } } #people .title-text { text-align: center; position: absolute; top: 50%; left: 50%; -webkit-transform: translateY(-50%) translateX(-50%); -khtml-transform: translateY(-50%) translateX(-50%); -moz-transform: translateY(-50%) translateX(-50%); -ms-transform: translateY(-50%) translateX(-50%); -o-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); } #people .title-text h3 { margin-bottom: 8px; font-size: 36px; } #people .title-text p { width: 170px; margin: auto; } @charset "UTF-8"; /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ .merge-head .cancel, .merge-head .combine { display: inline-block; padding: 0 15px; height: 2.5em; line-height: 2.5em; border-radius: 4px; text-align: center; border: none; font-family: inherit; font-size: inherit; font-weight: bold; letter-spacing: 0.4px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .merge-head .cancel:disabled, .merge-head .combine:disabled, .merge-head .disabled.cancel, .merge-head .disabled.combine { cursor: default; } .merge-head .cancel + a, .merge-head .combine + a, .merge-head .cancel + button, .merge-head .combine + button { margin-left: 15px; } .merge-head .cancel { background: none; color: inherit; } .merge-head .cancel:enabled:hover, .merge-head .cancel:enabled:focus, .merge-head .cancel:enabled:active, .merge-head .cancel:enabled.active { color: inherit; background: none; } .merge-head .combine { background-color: #77a9f8; color: #fff; } .merge-head .combine:enabled:hover, .merge-head .combine:enabled:focus, .merge-head .combine:enabled:active, .merge-head .combine:enabled.active { background-color: #69a0f8; color: #fff; } .merge-head .combine:disabled, .merge-head .disabled.combine { background-color: #5a97f7; } /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ /* ------------------------------------------------------------- Mixins meant to replace the use of z-index completely. These allow developers to focus on the intent of positioning as named layers. Each of these mixins accepts an $adjust value, which is there to allow you to prioritize multiple elements in the same layer. Mixins available: - layer-background Arguments: [$adjust] Adds approprite z-index value for elements that are meant to be below the page's main content - layer-midground Arguments: [$adjust] Adds appropriate z-index value for elements that are the page's primary content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that are meant to be priminent / above the main content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that should appear above everything else (IE - modals) ------------------------------------------------------------- */ /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ .merge-head { background-color: #3d7eda; font-size: 0.9em; position: fixed; top: 0; left: 0; right: 0; height: 75px; line-height: 75px; color: #fff; z-index: 201; -webkit-transition: opacity 333ms ease; -khtml-transition: opacity 333ms ease; -moz-transition: opacity 333ms ease; -ms-transition: opacity 333ms ease; -o-transition: opacity 333ms ease; transition: opacity 333ms ease; text-align: center; } .merge-head a, .merge-head button { color: #fff; } .merge-head h4 { font-weight: bold; color: #fff; } .merge-head .buttons { white-space: nowrap; } .merge-head .cancel { color: rgba(255, 255, 255, 0.5); } @charset "UTF-8"; /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ .merge-dialog input { font-size: 12px; border: 1px solid #EEE; padding: 5px 10px; display: inline-block; background: #fff; border-radius: 5px; box-shadow: inset 0px 2px 0px 0px rgba(0, 0, 0, 0.05); outline: none; } /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ /* ------------------------------------------------------------- Mixins meant to replace the use of z-index completely. These allow developers to focus on the intent of positioning as named layers. Each of these mixins accepts an $adjust value, which is there to allow you to prioritize multiple elements in the same layer. Mixins available: - layer-background Arguments: [$adjust] Adds approprite z-index value for elements that are meant to be below the page's main content - layer-midground Arguments: [$adjust] Adds appropriate z-index value for elements that are the page's primary content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that are meant to be priminent / above the main content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that should appear above everything else (IE - modals) ------------------------------------------------------------- */ /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ body.mobile .merge-dialog .button, body.mobile .merge-dialog .button-secondary { width: 100%; margin: 3px; } .merge-dialog .dialog-content { text-align: center; } .merge-dialog .intro { margin: 15px 0 5px 0; } .merge-dialog .face { width: 60px; height: 60px; line-height: 60px; } .merge-dialog .face .extra-count { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #dee1ea; border-radius: 50%; font-size: 1.3em; } .merge-dialog .face + .face { margin-left: 12px; } .merge-dialog input { width: 100%; } @charset "UTF-8"; /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ /* ------------------------------------------------------------- Mixins meant to replace the use of z-index completely. These allow developers to focus on the intent of positioning as named layers. Each of these mixins accepts an $adjust value, which is there to allow you to prioritize multiple elements in the same layer. Mixins available: - layer-background Arguments: [$adjust] Adds approprite z-index value for elements that are meant to be below the page's main content - layer-midground Arguments: [$adjust] Adds appropriate z-index value for elements that are the page's primary content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that are meant to be priminent / above the main content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that should appear above everything else (IE - modals) ------------------------------------------------------------- */ /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ .face-grid .node { display: inline-block; text-align: center; height: auto; width: 16.66667%; min-height: initial; max-height: initial; position: relative; } body.tablet .face-grid .node { width: 25%; } body.mobile .face-grid .node { width: 33.33333%; } .face-grid .node:before { content: ''; display: block; padding-top: 100%; } .face-grid .node .preload-image:after { display: none; } .face-grid .node .preview { position: relative; position: absolute; left: 18px; right: 18px; top: 24px; display: block; } .face-grid .node .preview:before { content: ''; display: block; padding-top: 100%; } .face-grid .node .preview .face { position: absolute; top: 0; left: 0; bottom: 0; right: 0; height: auto; width: auto; } .face-grid .node .description { margin: 0 18px; height: 45px; } .face-grid .node .rename-menu .expanded-nav { z-index: 110; } .face-grid .node .name { margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .face-grid .node .name.unknown { font-weight: lighter; font-style: italic; } .face-grid .node .count { color: #bbc1d0; font-weight: lighter; } .face-grid .node .selector { position: absolute; top: -15px; left: -15px; } .face-grid .node .selector.selected, .select-mode .face-grid .node .selector { height: 100%; width: 100%; } .face-grid .node .selector.selected:before { border-color: #fff; box-shadow: none; } .face-grid .node .selector.selected + a .face { top: 2px; bottom: 2px; right: 2px; left: 2px; } .face-grid .node .selector:before { border-color: #bbc1d0; z-index: 200; } .face-grid .node .selector:after { top: 15px; left: 15px; border-radius: 50%; } @charset "UTF-8"; /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ .rename-menu .expanded-nav button { display: inline-block; padding: 0 15px; height: 2.5em; line-height: 2.5em; border-radius: 4px; text-align: center; border: none; font-family: inherit; font-size: inherit; font-weight: bold; letter-spacing: 0.4px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rename-menu .expanded-nav button:disabled, .rename-menu .expanded-nav button.disabled { cursor: default; } .rename-menu .expanded-nav button + a, .rename-menu .expanded-nav button + button { margin-left: 15px; } .rename-menu .expanded-nav button { background: #FECB88; color: #765627; } .rename-menu .expanded-nav button:enabled:hover { background-color: #F2B769; color: #765627; } .rename-menu .expanded-nav button:enabled:active, .rename-menu .expanded-nav button:enabled.active, .rename-menu .expanded-nav button:enabled:focus { background-color: #ffeacf; color: #765627; } .rename-menu .expanded-nav button:disabled, .rename-menu .expanded-nav button.disabled { background-color: #fee1bb; } .rename-menu .expanded-nav button.secondary { background-color: #7985a3; color: #fff; font-weight: normal; } .rename-menu .expanded-nav button.secondary:enabled:hover { color: #fff; background-color: #637090; } .rename-menu .expanded-nav button.secondary:enabled:focus, .rename-menu .expanded-nav button.secondary:enabled:active, .rename-menu .expanded-nav button.secondary:enabled.active { background-color: #919bb4; color: #fff; } .rename-menu .expanded-nav button.secondary:disabled, .rename-menu .expanded-nav button.disabled.secondary { background-color: #e3e5ec; } .rename-menu .expanded-nav input { font-size: 12px; border: 1px solid #EEE; padding: 5px 10px; display: inline-block; background: #fff; border-radius: 5px; box-shadow: inset 0px 2px 0px 0px rgba(0, 0, 0, 0.05); outline: none; } /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ /* ------------------------------------------------------------- Mixins meant to replace the use of z-index completely. These allow developers to focus on the intent of positioning as named layers. Each of these mixins accepts an $adjust value, which is there to allow you to prioritize multiple elements in the same layer. Mixins available: - layer-background Arguments: [$adjust] Adds approprite z-index value for elements that are meant to be below the page's main content - layer-midground Arguments: [$adjust] Adds appropriate z-index value for elements that are the page's primary content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that are meant to be priminent / above the main content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that should appear above everything else (IE - modals) ------------------------------------------------------------- */ .rename-menu .expanded-nav button:before { font-family: "fontIcons"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; text-transform: none; } /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ .rename-menu { max-width: 100%; } .rename-menu .toggle { max-width: 100%; } .rename-menu .highlighted { color: #000; } .rename-menu .expanded-nav { width: 175px; } .rename-menu .expanded-nav form { position: relative; } .rename-menu .expanded-nav input { height: 30px; width: calc(100% - 30px); display: inline-block; border-top-right-radius: 0px; border-bottom-right-radius: 0px; } .rename-menu .expanded-nav button { position: absolute; top: 0; right: 0; height: 30px; width: 30px; text-align: center; border-top-left-radius: 0px; border-bottom-left-radius: 0px; padding: 0; } .rename-menu .expanded-nav button:before { content: "\E00D"; font-size: 12px; line-height: 12px; vertical-align: middle; display: inline-block; display: block; } .rename-menu .expanded-nav .auto-complete-widget .result { position: static; box-shadow: none; margin-top: 10px; } .rename-menu .expanded-nav .auto-complete-widget .result li { height: 30px; line-height: 30px; padding: 0 4px; } .rename-menu .expanded-nav .auto-complete-widget .result li .item { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rename-menu .expanded-nav .auto-complete-widget .result li .item .face { position: relative; display: inline-block; width: 25px; height: 25px; vertical-align: middle; margin-right: 7px; } .rename-menu .expanded-nav .auto-complete-widget .result li.selected { background-color: #f4f5f7; } .rename-menu.open .toggle { color: #3d7eda; } @charset "UTF-8"; /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ #people-detail .sort-filter:after { content: ''; display: block; clear: both; } /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ #people-detail .sort-filter:after { content: ''; display: block; clear: both; } /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ /* ------------------------------------------------------------- Mixins meant to replace the use of z-index completely. These allow developers to focus on the intent of positioning as named layers. Each of these mixins accepts an $adjust value, which is there to allow you to prioritize multiple elements in the same layer. Mixins available: - layer-background Arguments: [$adjust] Adds approprite z-index value for elements that are meant to be below the page's main content - layer-midground Arguments: [$adjust] Adds appropriate z-index value for elements that are the page's primary content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that are meant to be priminent / above the main content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that should appear above everything else (IE - modals) ------------------------------------------------------------- */ #people-detail .rename-face .toggle:after, #people-detail .change-profile-image:before { font-family: "fontIcons"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; text-transform: none; } /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ #people-detail { position: inherit; padding-top: 255px; } #people-detail .people-detail-head { background-color: #F6F7FD; height: 170px; position: absolute; top: 75px; left: 0; right: 0; } body.mobile #people-detail .people-detail-head { top: 50px; } #people-detail .people-detail-head .app-content { height: 170px; } #people-detail .people-detail-head .app-content:after { display: none; } #people-detail .rename-face { position: absolute; top: 50%; left: 50%; -webkit-transform: translateY(-50%) translateX(-50%); -khtml-transform: translateY(-50%) translateX(-50%); -moz-transform: translateY(-50%) translateX(-50%); -ms-transform: translateY(-50%) translateX(-50%); -o-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); z-index: 110; vertical-align: middle; white-space: nowrap; } #people-detail .rename-face .rename-menu { line-height: inherit; } #people-detail .rename-face .toggle { max-width: 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 18px; line-height: 1.3em; } #people-detail .rename-face .toggle:after { content: "\E01B"; font-size: 12px; line-height: 12px; vertical-align: middle; display: inline-block; margin-left: 5px; opacity: 0; -webkit-transition: opacity 100ms ease; -khtml-transition: opacity 100ms ease; -moz-transition: opacity 100ms ease; -ms-transition: opacity 100ms ease; -o-transition: opacity 100ms ease; transition: opacity 100ms ease; } #people-detail .rename-face .toggle:hover:after { opacity: 1; } #people-detail .rename-face .toggle:before { display: none; } #people-detail .rename-face .face-lg { vertical-align: middle; height: 100px; width: 100px; } #people-detail .rename-face .content { margin-left: 20px; line-height: 22px; display: inline-block; vertical-align: middle; text-align: left; } #people-detail .rename-face .name { font-size: 1.4em; } #people-detail .rename-face .name.unknown { color: #3a89f6; } #people-detail .rename-face .name.unknown:hover { color: #344A5D; } #people-detail .rename-face .count { color: #bbc1d0; font-weight: 200; font-size: 1em; } #people-detail .rename-face .tooltip { position: absolute; left: 50px; top: 15px; } #people-detail .rename-face .tooltip .tooltip-body { pointer-events: none; opacity: 0; } #people-detail .rename-face .face:hover ~ .tooltip .tooltip-body { opacity: 1; } #people-detail .change-profile-image { border-radius: 50%; position: relative; } #people-detail .change-profile-image:after { content: ''; position: absolute; top: -7px; left: -7px; width: calc(100% + 14px); height: calc(100% + 14px); border-radius: 50%; background: rgba(255, 255, 255, 0.9); border: 4px dotted transparent; opacity: 0; -webkit-transition: border 100ms ease, opacity 100ms ease; -khtml-transition: border 100ms ease, opacity 100ms ease; -moz-transition: border 100ms ease, opacity 100ms ease; -ms-transition: border 100ms ease, opacity 100ms ease; -o-transition: border 100ms ease, opacity 100ms ease; transition: border 100ms ease, opacity 100ms ease; } #people-detail .change-profile-image:before { content: "\E01B"; font-size: 35px; line-height: 35px; vertical-align: middle; display: inline-block; color: #3d7eda; opacity: 0; position: absolute; top: 50%; left: 50%; -webkit-transform: translateY(-50%) translateX(-50%); -khtml-transform: translateY(-50%) translateX(-50%); -moz-transform: translateY(-50%) translateX(-50%); -ms-transform: translateY(-50%) translateX(-50%); -o-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); z-index: 100; -webkit-transition: opacity 100ms ease; -khtml-transition: opacity 100ms ease; -moz-transition: opacity 100ms ease; -ms-transition: opacity 100ms ease; -o-transition: opacity 100ms ease; transition: opacity 100ms ease; } #people-detail .change-profile-image:hover:not(.active):before { opacity: 1; } #people-detail .change-profile-image:hover:after, #people-detail .change-profile-image.active:after { opacity: 1; } #people-detail .change-profile-image.active:after { border-color: #3d7eda; } #people-detail .sort-filter { float: none; display: block; text-align: right; } .avatar-change-preview .dialog-content { line-height: 100px; } .avatar-change-preview .face { vertical-align: middle; height: 100px; width: 100px; } .avatar-change-preview .loading { vertical-align: middle; position: static; display: inline-block; margin: 0; } .avatar-change-preview .error { display: inline-block; vertical-align: middle; line-height: normal; } @charset "UTF-8"; /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ /* ------------------------------------------------------------- Mixins meant to replace the use of z-index completely. These allow developers to focus on the intent of positioning as named layers. Each of these mixins accepts an $adjust value, which is there to allow you to prioritize multiple elements in the same layer. Mixins available: - layer-background Arguments: [$adjust] Adds approprite z-index value for elements that are meant to be below the page's main content - layer-midground Arguments: [$adjust] Adds appropriate z-index value for elements that are the page's primary content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that are meant to be priminent / above the main content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that should appear above everything else (IE - modals) ------------------------------------------------------------- */ /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ #bulk-face-edit { position: static; padding-top: 255px; } #bulk-face-edit .secondary-head { background-color: #F6F7FD; height: 170px; position: absolute; top: 75px; left: 0; right: 0; } body.mobile #bulk-face-edit .secondary-head { top: 50px; } #bulk-face-edit .secondary-head .app-content { height: 170px; } #bulk-face-edit h4 { font-size: 16px; text-align: center; } #bulk-face-edit .avatar { position: absolute; top: 50%; left: 50%; -webkit-transform: translateY(-50%) translateX(-50%); -khtml-transform: translateY(-50%) translateX(-50%); -moz-transform: translateY(-50%) translateX(-50%); -ms-transform: translateY(-50%) translateX(-50%); -o-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); vertical-align: middle; white-space: nowrap; } #bulk-face-edit .avatar .face-lg { vertical-align: middle; height: 100px; width: 100px; } #bulk-face-edit .avatar .content { margin-left: 20px; line-height: 22px; display: inline-block; vertical-align: middle; text-align: left; } #bulk-face-edit .avatar h2 { font-size: 18px; margin: auto; } #bulk-face-edit .avatar .count { color: #bbc1d0; font-weight: 200; font-size: 14px; } #bulk-face-edit .mosaic-item .selector { z-index: 101; } #bulk-face-edit .mosaic-item .bulk-face-edit-node { -webkit-transition: top 100ms ease-out, left 100ms ease-out, right 100ms ease-out, bottom 100ms ease-out; -khtml-transition: top 100ms ease-out, left 100ms ease-out, right 100ms ease-out, bottom 100ms ease-out; -moz-transition: top 100ms ease-out, left 100ms ease-out, right 100ms ease-out, bottom 100ms ease-out; -ms-transition: top 100ms ease-out, left 100ms ease-out, right 100ms ease-out, bottom 100ms ease-out; -o-transition: top 100ms ease-out, left 100ms ease-out, right 100ms ease-out, bottom 100ms ease-out; transition: top 100ms ease-out, left 100ms ease-out, right 100ms ease-out, bottom 100ms ease-out; } #bulk-face-edit .mosaic-item .selector.selected ~ .bulk-face-edit-node { top: 3px; left: 3px; right: 3px; bottom: 3px; } @charset "UTF-8"; /* ------------------------------------------------------------- Mixins meant to replace the use of z-index completely. These allow developers to focus on the intent of positioning as named layers. Each of these mixins accepts an $adjust value, which is there to allow you to prioritize multiple elements in the same layer. Mixins available: - layer-background Arguments: [$adjust] Adds approprite z-index value for elements that are meant to be below the page's main content - layer-midground Arguments: [$adjust] Adds appropriate z-index value for elements that are the page's primary content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that are meant to be priminent / above the main content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that should appear above everything else (IE - modals) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ .bulk-face-edit-node.image-loading:before, .bulk-face-edit-node.placeholder:before, .bulk-face-edit-node.image-error:before { font-family: "fontIcons"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; text-transform: none; } /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ .bulk-face-edit-node { overflow: hidden; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .bulk-face-edit-node .face-circle { position: relative; box-shadow: 0px 0px 0px 1000px rgba(40, 55, 74, 0.5); border: 2px solid rgba(255, 255, 255, 0.5); border-radius: 50%; z-index: 100; } .bulk-face-edit-node.placeholder, .bulk-face-edit-node.image-loading, .bulk-face-edit-node.image-error { background-color: #F6F7FD; } .bulk-face-edit-node.placeholder .face-circle, .bulk-face-edit-node.image-loading .face-circle, .bulk-face-edit-node.image-error .face-circle { display: none; } .bulk-face-edit-node.image-loading:before, .bulk-face-edit-node.placeholder:before { content: "\E004"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; color: #cdd2db; position: absolute; top: 50%; left: 50%; -webkit-transform: translateY(-50%) translateX(-50%); -khtml-transform: translateY(-50%) translateX(-50%); -moz-transform: translateY(-50%) translateX(-50%); -ms-transform: translateY(-50%) translateX(-50%); -o-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); } .bulk-face-edit-node.image-error:before { content: "\E009"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; color: #cdd2db; position: absolute; top: 50%; left: 50%; -webkit-transform: translateY(-50%) translateX(-50%); -khtml-transform: translateY(-50%) translateX(-50%); -moz-transform: translateY(-50%) translateX(-50%); -ms-transform: translateY(-50%) translateX(-50%); -o-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); } @charset "UTF-8"; /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ /* ------------------------------------------------------------- Mixins meant to replace the use of z-index completely. These allow developers to focus on the intent of positioning as named layers. Each of these mixins accepts an $adjust value, which is there to allow you to prioritize multiple elements in the same layer. Mixins available: - layer-background Arguments: [$adjust] Adds approprite z-index value for elements that are meant to be below the page's main content - layer-midground Arguments: [$adjust] Adds appropriate z-index value for elements that are the page's primary content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that are meant to be priminent / above the main content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that should appear above everything else (IE - modals) ------------------------------------------------------------- */ /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ #places header.title { position: relative; height: 190px; background-image: url("https://images-na.ssl-images-amazon.com/images/G/01/digital/photos/web-places-header.png"); background-size: cover; background-repeat: no-repeat; background-position: center center; } @media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) { #places header.title { background-image: url("https://images-na.ssl-images-amazon.com/images/G/01/digital/photos/web-places-header2x.png"); } } #places header.title h3 { position: absolute; top: 50%; left: 50%; -webkit-transform: translateY(-50%) translateX(-50%); -khtml-transform: translateY(-50%) translateX(-50%); -moz-transform: translateY(-50%) translateX(-50%); -ms-transform: translateY(-50%) translateX(-50%); -o-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); font-size: 36px; } #places .node { position: relative; height: auto; min-height: initial; max-height: initial; text-align: center; width: 16.66667%; } #places .node:before { content: ''; display: block; padding-top: 100%; } #places .node .preview-container { position: relative; position: absolute; } #places .node .preview-container:before { content: ''; display: block; padding-top: 100%; } #places .node .description { height: 45px; } body.tablet #places .node { width: 25%; } body.mobile #places .node { width: 33.33333%; } @charset "UTF-8"; /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ .location { display: inline-block; } .location .preview-container { position: absolute; left: 18px; right: 18px; top: 24px; display: block; } .location .preview-image { position: absolute; top: 0; left: 0; height: 100%; width: 100%; } .location .preload-image { border-radius: 50%; vertical-align: middle; background-color: #F6F7FD; } .location .preload-image .bg-image { border-radius: 50%; } .location .name { margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .location .name.unknown { color: #a6aec0; font-weight: lighter; font-style: italic; } .location .count { color: #bbc1d0; font-weight: lighter; } @charset "UTF-8"; /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ /* ------------------------------------------------------------- Mixins meant to replace the use of z-index completely. These allow developers to focus on the intent of positioning as named layers. Each of these mixins accepts an $adjust value, which is there to allow you to prioritize multiple elements in the same layer. Mixins available: - layer-background Arguments: [$adjust] Adds approprite z-index value for elements that are meant to be below the page's main content - layer-midground Arguments: [$adjust] Adds appropriate z-index value for elements that are the page's primary content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that are meant to be priminent / above the main content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that should appear above everything else (IE - modals) ------------------------------------------------------------- */ /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ #places-detail { position: inherit; padding-top: 255px; } #places-detail header.location-header { background-color: #F6F7FD; height: 170px; position: absolute; top: 75px; left: 0; right: 0; text-align: center; } body.mobile #places-detail header.location-header { top: 50px; } #places-detail header.location-header .app-content { height: 170px; } #places-detail .sort-filter { float: none; display: block; text-align: right; } #places-detail .location { line-height: 170px; } #places-detail .location .preview-container { position: relative; left: auto; right: auto; top: auto; bottom: auto; vertical-align: middle; display: inline-block; width: 100px; height: 100px; } #places-detail .location .description { vertical-align: middle; display: inline-block; text-align: left; margin-left: 20px; line-height: normal; } #places-detail .location .description p { color: #a6aec0; margin-bottom: 0; } #places-detail .location .description .name { color: #7985a3; font-size: 18px; line-height: 1.3em; } #places-detail .location .description .count { margin: 8px 0 0 0; } @charset "UTF-8"; /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ #search .sort-filter:after { content: ''; display: block; clear: both; } /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ #search .sort-filter:after { content: ''; display: block; clear: both; } /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ /* ------------------------------------------------------------- Mixins meant to replace the use of z-index completely. These allow developers to focus on the intent of positioning as named layers. Each of these mixins accepts an $adjust value, which is there to allow you to prioritize multiple elements in the same layer. Mixins available: - layer-background Arguments: [$adjust] Adds approprite z-index value for elements that are meant to be below the page's main content - layer-midground Arguments: [$adjust] Adds appropriate z-index value for elements that are the page's primary content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that are meant to be priminent / above the main content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that should appear above everything else (IE - modals) ------------------------------------------------------------- */ /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ #search .search-head { border-bottom: 1px solid #EEE; } #search .search-head .column { -webkit-transition: width 333ms ease; -khtml-transition: width 333ms ease; -moz-transition: width 333ms ease; -ms-transition: width 333ms ease; -o-transition: width 333ms ease; transition: width 333ms ease; } #search .search-head .column-1 { width: 200px; } body.mobile #search .search-head .column-1 { width: auto; } body.mobile #search .search-head .button-report, body.tablet #search .search-head .button-report { display: none; } #search .search-head .back { margin-right: 5px; } #search .search-head .sort-filter { float: none; } #search .search-head .sort-filter .toggle:before { display: none; } #search .search-head .app-content:after { background: none; } #search .search-head #archive-toggle { line-height: 1em; width: 100%; position: absolute; top: 50%; left: 50%; -webkit-transform: translateY(-50%) translateX(-50%); -khtml-transform: translateY(-50%) translateX(-50%); -moz-transform: translateY(-50%) translateX(-50%); -ms-transform: translateY(-50%) translateX(-50%); -o-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); } #search .rename-face { margin-bottom: 15px; } #search input { border: solid 1px #bbc1d0; border-right: none; } @charset "UTF-8"; /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ .report-feedback .wrap textarea { font-size: 12px; border: 1px solid #EEE; padding: 5px 10px; display: inline-block; background: #fff; border-radius: 5px; box-shadow: inset 0px 2px 0px 0px rgba(0, 0, 0, 0.05); outline: none; } /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ /* ------------------------------------------------------------- Mixins meant to replace the use of z-index completely. These allow developers to focus on the intent of positioning as named layers. Each of these mixins accepts an $adjust value, which is there to allow you to prioritize multiple elements in the same layer. Mixins available: - layer-background Arguments: [$adjust] Adds approprite z-index value for elements that are meant to be below the page's main content - layer-midground Arguments: [$adjust] Adds appropriate z-index value for elements that are the page's primary content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that are meant to be priminent / above the main content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that should appear above everything else (IE - modals) ------------------------------------------------------------- */ .report-feedback .dialog-head:before { font-family: "fontIcons"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; text-transform: none; } /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ .report-feedback { width: 40%; } .report-feedback .dialog-head:before { content: ""; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; } .report-feedback .a-spacing-large { margin-bottom: 12px !important; } .report-feedback .wrap { position: relative; display: block; } .report-feedback .wrap textarea { width: 100%; resize: none; padding: 5px 7px; } .report-feedback .wrap textarea.invalid { color: #ff0000; } .report-feedback .wrap span { text-align: right; position: absolute; bottom: 5px; right: 3px; font-size: 0.8em; } .report-feedback .button-container { text-align: right; } .report-feedback p { font-size: 0.9em; } @charset "UTF-8"; #archive-toggle .customer-tab:before, #archive-toggle .family-tab:before { font-family: "fontIcons"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; text-transform: none; } /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ #archive-toggle > button:before { margin-right: 9px; } #archive-toggle .customer-tab:before { content: "\E039"; font-size: 16px; line-height: 16px; vertical-align: middle; display: inline-block; } #archive-toggle .family-tab:before { content: "\E022"; font-size: 16px; line-height: 16px; vertical-align: middle; display: inline-block; } @charset "UTF-8"; /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ #settings .settings-notification .settings-notification-loading { -webkit-animation: none 333ms linear infinite; -khtml-animation: none 333ms linear infinite; -moz-animation: none 333ms linear infinite; -ms-animation: none 333ms linear infinite; -o-animation: none 333ms linear infinite; animation: none 333ms linear infinite; } #settings .settings-notification .settings-notification-loading { -webkit-animation-name: spin; -khtml-animation-name: spin; -moz-animation-name: spin; -ms-animation-name: spin; -o-animation-name: spin; animation-name: spin; -webkit-animation-duration: 1000ms; -khtml-animation-duration: 1000ms; -moz-animation-duration: 1000ms; -ms-animation-duration: 1000ms; -o-animation-duration: 1000ms; animation-duration: 1000ms; -webkit-animation-timing-function: linear; -khtml-animation-timing-function: linear; -moz-animation-timing-function: linear; -ms-animation-timing-function: linear; -o-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -khtml-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-iteration-count: infinite; } #settings .settings-content input[type=text] { font-size: 12px; border: 1px solid #EEE; padding: 5px 10px; display: inline-block; background: #fff; border-radius: 5px; box-shadow: inset 0px 2px 0px 0px rgba(0, 0, 0, 0.05); outline: none; } #settings .settings-notification .settings-notification-loading { background: center center no-repeat; background-size: cover; background-image: url(data:image/png;base64,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); } /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ #settings .settings-notification .settings-notification-loading { -webkit-animation: none 333ms linear infinite; -khtml-animation: none 333ms linear infinite; -moz-animation: none 333ms linear infinite; -ms-animation: none 333ms linear infinite; -o-animation: none 333ms linear infinite; animation: none 333ms linear infinite; } /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ #settings .settings-notification .settings-notification-loading { background: center center no-repeat; background-size: cover; background-image: url(data:image/png;base64,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); } /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ #settings .settings-notification .settings-notification-loading { -webkit-animation: none 333ms linear infinite; -khtml-animation: none 333ms linear infinite; -moz-animation: none 333ms linear infinite; -ms-animation: none 333ms linear infinite; -o-animation: none 333ms linear infinite; animation: none 333ms linear infinite; } #settings .settings-notification .settings-notification-loading { -webkit-animation-name: spin; -khtml-animation-name: spin; -moz-animation-name: spin; -ms-animation-name: spin; -o-animation-name: spin; animation-name: spin; -webkit-animation-duration: 1000ms; -khtml-animation-duration: 1000ms; -moz-animation-duration: 1000ms; -ms-animation-duration: 1000ms; -o-animation-duration: 1000ms; animation-duration: 1000ms; -webkit-animation-timing-function: linear; -khtml-animation-timing-function: linear; -moz-animation-timing-function: linear; -ms-animation-timing-function: linear; -o-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -khtml-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-iteration-count: infinite; } /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ /* ------------------------------------------------------------- Mixins meant to replace the use of z-index completely. These allow developers to focus on the intent of positioning as named layers. Each of these mixins accepts an $adjust value, which is there to allow you to prioritize multiple elements in the same layer. Mixins available: - layer-background Arguments: [$adjust] Adds approprite z-index value for elements that are meant to be below the page's main content - layer-midground Arguments: [$adjust] Adds appropriate z-index value for elements that are the page's primary content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that are meant to be priminent / above the main content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that should appear above everything else (IE - modals) ------------------------------------------------------------- */ #settings .settings-notification li button:after { font-family: "fontIcons"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; text-transform: none; } /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ #settings { padding-bottom: 50px; } #settings p { color: #a6aec0; } #settings section { background-color: inherit; -webkit-transition: background-color, 0.3s ease-in-out 0s; -khtml-transition: background-color, 0.3s ease-in-out 0s; -moz-transition: background-color, 0.3s ease-in-out 0s; -ms-transition: background-color, 0.3s ease-in-out 0s; -o-transition: background-color, 0.3s ease-in-out 0s; transition: background-color, 0.3s ease-in-out 0s; } #settings section.flash { background-color: #daedff; } #settings .secondary-head .back { margin-right: 15px; } #settings .secondary-head .columns .no-group .column-size { display: block; } #settings .settings-content { max-width: 900px; margin: 0 auto; } #settings .settings-content h3 { font-size: 15px; font-weight: bold; } #settings .settings-content h4 { font-size: 14px; font-weight: bold; letter-spacing: 0.3px; } #settings .settings-content a { color: #3d7eda; } #settings .settings-content input[type=text] { height: 36px; box-shadow: none; } #settings .settings-content .button { margin: 15px 0; } #settings .settings-content .button.form-button { min-width: 100px; margin: 15px; } #settings #settings-toggle { line-height: normal; vertical-align: middle; display: inline-block; width: 100%; } #settings .settings-interactive { width: 70%; display: inline-block; vertical-align: top; } #settings .settings-interactive, #settings .settings-interactive p { color: #7985a3; } body.mobile #settings .settings-interactive { width: 100%; } #settings .settings-section { padding-bottom: 40px; } #settings .settings-section + .settings-section { padding-top: 40px; border-top: solid 1px #EEE; } body.mobile #settings .settings-section { margin: 15px 0; padding: 15px 0; } body.mobile #settings .settings-section:first-child { margin-top: 0; padding-top: 0; } #settings .settings-manage-third-party .settings-help { width: 100%; } #settings .settings-manage-third-party a.help { margin-left: 1em; } #settings .settings-notification li { margin-bottom: 20px; } #settings .settings-notification li button:after { content: "\E00D"; font-size: 8px; line-height: 8px; vertical-align: middle; display: inline-block; bottom: 1px; display: inline-block; color: #fff; vertical-align: middle; width: 14px; height: 14px; line-height: 14px; border-radius: 2px; display: inline-block; vertical-align: middle; border: 1px solid #bbc1d0; text-align: center; font-weight: 900; position: relative; margin-right: 12px; } #settings .settings-notification li.active button:after { background: #7985a3; border: none; } #settings .settings-notification .notification-button { margin: 0 15px; } #settings .settings-notification .settings-notification-loading { position: absolute; left: 50%; -webkit-transform: translateX(-50%); -khtml-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); margin-left: -25px; width: 50px; height: 50px; overflow: hidden; vertical-align: middle; display: inline-block; } #settings .settings-notification .settings-interactive-content { position: relative; } #settings .settings-notification .settings-interactive-content .settings-interactive-button-enable-wrapper { margin-bottom: 15px; } #settings .toggle-switch { margin: 0 0 30px 0; display: inline-block; } @charset "UTF-8"; /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ /* ------------------------------------------------------------- Mixins meant to replace the use of z-index completely. These allow developers to focus on the intent of positioning as named layers. Each of these mixins accepts an $adjust value, which is there to allow you to prioritize multiple elements in the same layer. Mixins available: - layer-background Arguments: [$adjust] Adds approprite z-index value for elements that are meant to be below the page's main content - layer-midground Arguments: [$adjust] Adds appropriate z-index value for elements that are the page's primary content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that are meant to be priminent / above the main content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that should appear above everything else (IE - modals) ------------------------------------------------------------- */ /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ .settings-help { width: 30%; display: inline-block; vertical-align: top; letter-spacing: 0.3px; padding-right: 40px; } .settings-help h4 { font-size: 15px; font-weight: bold; } .settings-help p { font-size: 14px; } body.mobile .settings-help { width: 100%; margin-bottom: 15px; padding-right: 0; } @charset "UTF-8"; /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ /* ------------------------------------------------------------- Mixins meant to replace the use of z-index completely. These allow developers to focus on the intent of positioning as named layers. Each of these mixins accepts an $adjust value, which is there to allow you to prioritize multiple elements in the same layer. Mixins available: - layer-background Arguments: [$adjust] Adds approprite z-index value for elements that are meant to be below the page's main content - layer-midground Arguments: [$adjust] Adds appropriate z-index value for elements that are the page's primary content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that are meant to be priminent / above the main content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that should appear above everything else (IE - modals) ------------------------------------------------------------- */ .family-archive-members .remove-family:before { font-family: "fontIcons"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; text-transform: none; } /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ .family-archive-members li { position: relative; border: 1px solid #EEE; border-radius: 3px; padding: 5px 40px 5px 10px; margin-bottom: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .family-archive-members .face { margin-right: 20px; vertical-align: middle; } .family-archive-members .member-status { margin-left: 20px; text-transform: uppercase; } .family-archive-members .remove-family { width: 30px; height: 30px; line-height: 30px; text-align: center; right: 10px; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -khtml-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .family-archive-members .remove-family:before { content: "\E070"; font-size: 10px; line-height: 10px; vertical-align: middle; display: inline-block; } .transfer-admin-dialog .form-buttons { margin: 15px 15px 0px 15px; padding: 15px; display: inline-block; } .transfer-admin-dialog li { padding: 0; } .transfer-admin-dialog .dialog-content { overflow: hidden; } .transfer-admin-dialog label { margin: 5px; height: 40px; overflow: hidden; line-height: 40px; vertical-align: middle; display: inline-block; } .transfer-admin-dialog .face { height: 40px; width: 40px; position: relative; display: inline-block; margin: 0 8px; } .transfer-admin-dialog .customer-name { display: inline-block; vertical-align: top; } .transfer-admin-dialog .radio-button { display: inline-block; vertical-align: top; height: 40px; padding: 0; margin: 0 8px; } .transfer-admin-dialog h3 { font-size: 1em; } .transfer-admin-dialog h4 { font-size: 1em; } @charset "UTF-8"; /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ #settings .settings-pattern-recognition .toggle-error { -webkit-animation: none 333ms linear infinite; -khtml-animation: none 333ms linear infinite; -moz-animation: none 333ms linear infinite; -ms-animation: none 333ms linear infinite; -o-animation: none 333ms linear infinite; animation: none 333ms linear infinite; } #settings .settings-pattern-recognition .toggle-error { -webkit-animation-name: pop-out-fade-in; -khtml-animation-name: pop-out-fade-in; -moz-animation-name: pop-out-fade-in; -ms-animation-name: pop-out-fade-in; -o-animation-name: pop-out-fade-in; animation-name: pop-out-fade-in; -webkit-animation-duration: 333ms; -khtml-animation-duration: 333ms; -moz-animation-duration: 333ms; -ms-animation-duration: 333ms; -o-animation-duration: 333ms; animation-duration: 333ms; -webkit-animation-timing-function: ease; -khtml-animation-timing-function: ease; -moz-animation-timing-function: ease; -ms-animation-timing-function: ease; -o-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-iteration-count: 1; -khtml-animation-iteration-count: 1; -moz-animation-iteration-count: 1; -ms-animation-iteration-count: 1; -o-animation-iteration-count: 1; animation-iteration-count: 1; } /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ #settings .settings-pattern-recognition .toggle-error { -webkit-animation: none 333ms linear infinite; -khtml-animation: none 333ms linear infinite; -moz-animation: none 333ms linear infinite; -ms-animation: none 333ms linear infinite; -o-animation: none 333ms linear infinite; animation: none 333ms linear infinite; } /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ #settings .settings-pattern-recognition .toggle-error { -webkit-animation: none 333ms linear infinite; -khtml-animation: none 333ms linear infinite; -moz-animation: none 333ms linear infinite; -ms-animation: none 333ms linear infinite; -o-animation: none 333ms linear infinite; animation: none 333ms linear infinite; } #settings .settings-pattern-recognition .toggle-error { -webkit-animation-name: pop-out-fade-in; -khtml-animation-name: pop-out-fade-in; -moz-animation-name: pop-out-fade-in; -ms-animation-name: pop-out-fade-in; -o-animation-name: pop-out-fade-in; animation-name: pop-out-fade-in; -webkit-animation-duration: 333ms; -khtml-animation-duration: 333ms; -moz-animation-duration: 333ms; -ms-animation-duration: 333ms; -o-animation-duration: 333ms; animation-duration: 333ms; -webkit-animation-timing-function: ease; -khtml-animation-timing-function: ease; -moz-animation-timing-function: ease; -ms-animation-timing-function: ease; -o-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-iteration-count: 1; -khtml-animation-iteration-count: 1; -moz-animation-iteration-count: 1; -ms-animation-iteration-count: 1; -o-animation-iteration-count: 1; animation-iteration-count: 1; } /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ /* ------------------------------------------------------------- Mixins meant to replace the use of z-index completely. These allow developers to focus on the intent of positioning as named layers. Each of these mixins accepts an $adjust value, which is there to allow you to prioritize multiple elements in the same layer. Mixins available: - layer-background Arguments: [$adjust] Adds approprite z-index value for elements that are meant to be below the page's main content - layer-midground Arguments: [$adjust] Adds appropriate z-index value for elements that are the page's primary content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that are meant to be priminent / above the main content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that should appear above everything else (IE - modals) ------------------------------------------------------------- */ /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ #settings .settings-pattern-recognition .recognition-state strong { text-transform: uppercase; } #settings .settings-pattern-recognition .toggle-error { color: #fb6b7b; } @charset "UTF-8"; /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ .settings-personal-profile .profile-name:after { content: ''; display: block; clear: both; } /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ .settings-personal-profile .profile-name:after { content: ''; display: block; clear: both; } /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ /* ------------------------------------------------------------- Mixins meant to replace the use of z-index completely. These allow developers to focus on the intent of positioning as named layers. Each of these mixins accepts an $adjust value, which is there to allow you to prioritize multiple elements in the same layer. Mixins available: - layer-background Arguments: [$adjust] Adds approprite z-index value for elements that are meant to be below the page's main content - layer-midground Arguments: [$adjust] Adds appropriate z-index value for elements that are the page's primary content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that are meant to be priminent / above the main content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that should appear above everything else (IE - modals) ------------------------------------------------------------- */ .settings-personal-profile .edit-avatar.link:before { font-family: "fontIcons"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; text-transform: none; } /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ .settings-personal-profile .face { height: 72px; width: 72px; } .settings-personal-profile input.personal-profile { float: left; width: calc(60% - 15px); margin-right: 15px; } .settings-personal-profile input.personal-profile.invalid { color: #ff0000; } .settings-personal-profile .button.personal-profile { float: left; margin: 0 !important; } body.mobile .settings-personal-profile .profile-image, body.mobile .settings-personal-profile .profile-name { margin-top: 15px; vertical-align: top; display: inline-block; width: 35%; } body.mobile .settings-personal-profile .profile-name { width: 65%; } body.mobile .settings-personal-profile .button.personal-profile { margin: 15px 0px !important; float: right; } body.mobile .settings-personal-profile input.personal-profile { width: 100%; float: none; margin-right: 0; } .settings-personal-profile .edit-avatar.link { height: 72px; width: 72px; position: relative; margin-bottom: 40px; } .settings-personal-profile .edit-avatar.link:before { content: "\E01B"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; z-index: 200; -webkit-transition: opacity 333ms ease; -khtml-transition: opacity 333ms ease; -moz-transition: opacity 333ms ease; -ms-transition: opacity 333ms ease; -o-transition: opacity 333ms ease; transition: opacity 333ms ease; position: absolute; top: 50%; left: 50%; -webkit-transform: translateY(-50%) translateX(-50%); -khtml-transform: translateY(-50%) translateX(-50%); -moz-transform: translateY(-50%) translateX(-50%); -ms-transform: translateY(-50%) translateX(-50%); -o-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-opacity: 0; -khtml-opacity: 0; -moz-opacity: 0; -ms-opacity: 0; -o-opacity: 0; opacity: 0; } .settings-personal-profile .edit-avatar.link .customer-avatar { -webkit-transition: opacity 333ms ease; -khtml-transition: opacity 333ms ease; -moz-transition: opacity 333ms ease; -ms-transition: opacity 333ms ease; -o-transition: opacity 333ms ease; transition: opacity 333ms ease; } .settings-personal-profile .edit-avatar.link:hover:before { filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; -webkit-opacity: 1; -khtml-opacity: 1; -moz-opacity: 1; -ms-opacity: 1; -o-opacity: 1; opacity: 1; } .settings-personal-profile .edit-avatar.link:hover .customer-avatar { filter: alpha(opacity=50); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; -webkit-opacity: 0.5; -khtml-opacity: 0.5; -moz-opacity: 0.5; -ms-opacity: 0.5; -o-opacity: 0.5; opacity: 0.5; } @charset "UTF-8"; /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ .settings-family-vault .operation-in-progress .message .icon-spinner, .settings-family-vault .flash { -webkit-animation: none 333ms linear infinite; -khtml-animation: none 333ms linear infinite; -moz-animation: none 333ms linear infinite; -ms-animation: none 333ms linear infinite; -o-animation: none 333ms linear infinite; animation: none 333ms linear infinite; } .settings-family-vault .operation-in-progress .message .icon-spinner { -webkit-animation-name: spin; -khtml-animation-name: spin; -moz-animation-name: spin; -ms-animation-name: spin; -o-animation-name: spin; animation-name: spin; -webkit-animation-duration: 1000ms; -khtml-animation-duration: 1000ms; -moz-animation-duration: 1000ms; -ms-animation-duration: 1000ms; -o-animation-duration: 1000ms; animation-duration: 1000ms; -webkit-animation-timing-function: linear; -khtml-animation-timing-function: linear; -moz-animation-timing-function: linear; -ms-animation-timing-function: linear; -o-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -khtml-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-iteration-count: infinite; } .settings-family-vault .operation-in-progress .message .icon-spinner { background: center center no-repeat; background-size: cover; background-image: url(data:image/png;base64,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); } /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ .settings-family-vault .operation-in-progress .message .icon-spinner, .settings-family-vault .flash { -webkit-animation: none 333ms linear infinite; -khtml-animation: none 333ms linear infinite; -moz-animation: none 333ms linear infinite; -ms-animation: none 333ms linear infinite; -o-animation: none 333ms linear infinite; animation: none 333ms linear infinite; } /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ .settings-family-vault .operation-in-progress .message .icon-spinner { background: center center no-repeat; background-size: cover; background-image: url(data:image/png;base64,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); } /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ .settings-family-vault .operation-in-progress .message .icon-spinner, .settings-family-vault .flash { -webkit-animation: none 333ms linear infinite; -khtml-animation: none 333ms linear infinite; -moz-animation: none 333ms linear infinite; -ms-animation: none 333ms linear infinite; -o-animation: none 333ms linear infinite; animation: none 333ms linear infinite; } .settings-family-vault .operation-in-progress .message .icon-spinner { -webkit-animation-name: spin; -khtml-animation-name: spin; -moz-animation-name: spin; -ms-animation-name: spin; -o-animation-name: spin; animation-name: spin; -webkit-animation-duration: 1000ms; -khtml-animation-duration: 1000ms; -moz-animation-duration: 1000ms; -ms-animation-duration: 1000ms; -o-animation-duration: 1000ms; animation-duration: 1000ms; -webkit-animation-timing-function: linear; -khtml-animation-timing-function: linear; -moz-animation-timing-function: linear; -ms-animation-timing-function: linear; -o-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -khtml-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-iteration-count: infinite; } /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ /* ------------------------------------------------------------- Mixins meant to replace the use of z-index completely. These allow developers to focus on the intent of positioning as named layers. Each of these mixins accepts an $adjust value, which is there to allow you to prioritize multiple elements in the same layer. Mixins available: - layer-background Arguments: [$adjust] Adds approprite z-index value for elements that are meant to be below the page's main content - layer-midground Arguments: [$adjust] Adds appropriate z-index value for elements that are the page's primary content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that are meant to be priminent / above the main content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that should appear above everything else (IE - modals) ------------------------------------------------------------- */ /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ .settings-family-vault { position: relative; } .settings-family-vault .toggle-switch { margin: 0 0 30px 0; display: block; } .settings-family-vault .bulk-add-remove-wrapper { margin-top: 50px; } .settings-family-vault .button.bulk-add-to-family { margin-top: 0 !important; } .settings-family-vault .button.bulk-remove-from-family { margin-top: 50px !important; } body.mobile .settings-family-vault .button { width: 100%; } .settings-family-vault .operation-in-progress { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 200; background-color: rgba(255, 255, 255, 0.7); } .settings-family-vault .operation-in-progress .message { position: absolute; padding: 20px 30px; border-radius: 5px; text-align: center; background-color: #3d7eda; color: #fff; font-weight: 700; position: absolute; top: 50%; left: 50%; -webkit-transform: translateY(-50%) translateX(-50%); -khtml-transform: translateY(-50%) translateX(-50%); -moz-transform: translateY(-50%) translateX(-50%); -ms-transform: translateY(-50%) translateX(-50%); -o-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); } .settings-family-vault .operation-in-progress .message .icon-spinner { margin-right: 10px; width: 20px; height: 20px; overflow: hidden; vertical-align: middle; display: inline-block; } .settings-family-vault .flash { -webkit-animation-name: flash-background; -khtml-animation-name: flash-background; -moz-animation-name: flash-background; -ms-animation-name: flash-background; -o-animation-name: flash-background; animation-name: flash-background; -webkit-animation-duration: 1000ms; -khtml-animation-duration: 1000ms; -moz-animation-duration: 1000ms; -ms-animation-duration: 1000ms; -o-animation-duration: 1000ms; animation-duration: 1000ms; -webkit-animation-timing-function: ease; -khtml-animation-timing-function: ease; -moz-animation-timing-function: ease; -ms-animation-timing-function: ease; -o-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-iteration-count: 2; -khtml-animation-iteration-count: 2; -moz-animation-iteration-count: 2; -ms-animation-iteration-count: 2; -o-animation-iteration-count: 2; animation-iteration-count: 2; } .auto-add-to-fa-dialog h3 { font-size: 1em; } .auto-add-to-fa-dialog li { padding: 10px; } .auto-add-to-fa-dialog input { vertical-align: top; } .auto-add-to-fa-dialog .check-box-label { display: inline-block; width: calc(100% - 20px); padding-left: 20px; } .auto-add-to-fa-dialog .buttons { margin: 0px; padding: 10px; float: right; font-weight: bold; } .auto-add-to-fa-dialog .dialog-content { overflow: hidden; } @charset "UTF-8"; /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ .settings-storage-subscription .quota-button:after, .settings-storage-subscription .storage-details:after { content: ''; display: block; clear: both; } /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ .settings-storage-subscription .quota-button:after, .settings-storage-subscription .storage-details:after { content: ''; display: block; clear: both; } /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ /* ------------------------------------------------------------- Mixins meant to replace the use of z-index completely. These allow developers to focus on the intent of positioning as named layers. Each of these mixins accepts an $adjust value, which is there to allow you to prioritize multiple elements in the same layer. Mixins available: - layer-background Arguments: [$adjust] Adds approprite z-index value for elements that are meant to be below the page's main content - layer-midground Arguments: [$adjust] Adds appropriate z-index value for elements that are the page's primary content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that are meant to be priminent / above the main content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that should appear above everything else (IE - modals) ------------------------------------------------------------- */ .settings-storage-subscription .photo-text:before, .settings-storage-subscription .video-text:before { font-family: "fontIcons"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; text-transform: none; } /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ .settings-storage-subscription .plan-details { margin-top: 20px; } .settings-storage-subscription .plan-notice { padding: 1em; color: #fff; font-weight: bold; background: #fb6b7b; border-radius: 5px; margin: 0 0 1em; } .settings-storage-subscription .plan-notice a, .settings-storage-subscription .plan-notice a:link, .settings-storage-subscription .plan-notice a:visited, .settings-storage-subscription .plan-notice a:hover { color: #fff !important; text-decoration: underline; } .settings-storage-subscription .plan-info { display: inline-block; width: 50%; margin-top: 15px; } .settings-storage-subscription .plan-info h5 { font-weight: bold; font-size: inherit; margin: 0; } .settings-storage-subscription .plan-info span { display: block; margin-top: 5px; } body.mobile .settings-storage-subscription .plan-info { width: 100%; } .settings-storage-subscription .payment-container { margin-top: 30px; } .settings-storage-subscription .payment-container .payment-info { margin-top: 20px; margin-bottom: 20px; } .settings-storage-subscription .payment-container .payment-info .payment-card { vertical-align: middle; display: inline-block; height: 22px; padding-left: 44px; margin-right: 16px; } .settings-storage-subscription .payment-container .payment-info .payment-card.mastercard { background: url("https://images-na.ssl-images-amazon.com/images/G/01/checkout/payselect/card-logos-small/mc.gif") no-repeat; } .settings-storage-subscription .payment-container .payment-info .payment-card.amazonvisa { background: url("https://images-na.ssl-images-amazon.com/images/G/01/checkout/payselect/card-logos-small/amzn.gif") no-repeat; } .settings-storage-subscription .payment-container .payment-info .payment-card.visa { background: url("https://images-na.ssl-images-amazon.com/images/G/01/checkout/payselect/card-logos-small/visa.gif") no-repeat; } .settings-storage-subscription .payment-container .payment-info .payment-card.americanexpress { background: url("https://images-na.ssl-images-amazon.com/images/G/01/checkout/payselect/card-logos-small/amex.gif") no-repeat; } .settings-storage-subscription .payment-container .payment-info .payment-card.discover { background: url("https://images-na.ssl-images-amazon.com/images/G/01/checkout/payselect/card-logos-small/discover.gif") no-repeat; } .settings-storage-subscription .payment-container .payment-info .payment-card.dinersclub { background: url("https://images-na.ssl-images-amazon.com/images/G/01/checkout/payselect/card-logos-small/diners.gif") no-repeat; } .settings-storage-subscription .payment-container .payment-info .payment-card.japancreditbureau { background: url("https://images-na.ssl-images-amazon.com/images/G/01/checkout/payselect/card-logos-small/jcb.gif") no-repeat; } .settings-storage-subscription .payment-container .payment-info .payment-card.directdebitde { background: url("https://images-na.ssl-images-amazon.com/images/G/01/checkout/payselect/pay-method-logos/direct-debit-de.gif") no-repeat; } .settings-storage-subscription .payment-container .payment-info .payment-card.amazonplcc { background: url("https://images-na.ssl-images-amazon.com/images/G/01/checkout/payselect/card-logos-small/plcc.gif") no-repeat; } .settings-storage-subscription .subscription-text { text-align: left; float: left; margin-top: 20px; } .settings-storage-subscription .quota-button { display: block; position: relative; padding: 19px; color: #3a89f6; border: 1px solid #EEE; border-radius: 4px; font-weight: bold; font-size: 13px; line-height: 18px; margin: 30px 0; width: 100%; } .settings-storage-subscription .quota-button .upgrade-msg-text { display: block; } body.desktop .settings-storage-subscription .quota-button .upgrade-msg-text { display: inline-block; vertical-align: middle; width: 65%; } .settings-storage-subscription .quota-button .upgrade-plan { text-decoration: underline; text-align: right; } body.desktop .settings-storage-subscription .quota-button .upgrade-plan { display: inline-block; vertical-align: middle; width: 35%; } body.mobile .settings-storage-subscription .quota-button .upgrade-plan, body.tablet .settings-storage-subscription .quota-button .upgrade-plan { margin-top: 1em; float: right; } .settings-storage-subscription .quota-button.near-quota { background-color: #3a89f6; color: #fff; } .settings-storage-subscription .quota-button.over-quota { background-color: #f78595; color: #fff; } .settings-storage-subscription .photo-text { color: #006dff; } .settings-storage-subscription .photo-text:before { content: "\E048"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; } .settings-storage-subscription .video-text { color: #E881c4; } .settings-storage-subscription .video-text:before { content: "\E06D"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; } .settings-storage-subscription .photo-text, .settings-storage-subscription .video-text { display: block; font-weight: bold; font-size: 14px; } .settings-storage-subscription .photo-text:before, .settings-storage-subscription .video-text:before { margin-right: 8px; font-size: 13px; } .settings-storage-subscription .context-text { font-weight: bold; margin-left: 21px; color: #a6aec0; } .settings-storage-subscription .navigation-link { margin-right: 32px; display: inline-block; color: #006dff; } .settings-storage-subscription .storage-details { position: relative; text-align: left; width: 100%; } .settings-storage-subscription .storage-details .progress { height: 16px; width: 100%; display: block; position: relative; background: #F6F7FD; margin-bottom: 15px; } .settings-storage-subscription .storage-details .progress span { display: block; height: 16px; } .settings-storage-subscription .storage-details .progress span.photo-span { background: #3a89f6; } .settings-storage-subscription .storage-details .progress span.video-span { background: #E881c4; } .settings-storage-subscription .storage-details .storage-list li { padding-left: 15px; display: inline-block; vertical-align: top; width: 50%; height: 100px; } .settings-storage-subscription .storage-details .storage-list li:first-child { padding-left: 0; } body.mobile .settings-storage-subscription .storage-details .storage-list li { width: 100%; padding: 0; } .settings-storage-subscription .settings-interactive .settings-link:not(:first-child) { margin-top: 15px; } .settings-storage-subscription .settings-interactive .settings-link.desktop-app .highlight { font-weight: bold; } .settings-storage-subscription .loading { position: static; margin: 0 auto; display: block; } @charset "UTF-8"; /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ /* ------------------------------------------------------------- Mixins meant to replace the use of z-index completely. These allow developers to focus on the intent of positioning as named layers. Each of these mixins accepts an $adjust value, which is there to allow you to prioritize multiple elements in the same layer. Mixins available: - layer-background Arguments: [$adjust] Adds approprite z-index value for elements that are meant to be below the page's main content - layer-midground Arguments: [$adjust] Adds appropriate z-index value for elements that are the page's primary content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that are meant to be priminent / above the main content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that should appear above everything else (IE - modals) ------------------------------------------------------------- */ .dialog.subscription .dialog-head:before { font-family: "fontIcons"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; text-transform: none; } /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ .dialog.subscription { width: 500px; } body.mobile .dialog.subscription { width: 320px; } .dialog.subscription .dialog-head:before { content: "\E05E"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; } .dialog.subscription .dialog-content { padding: 0; } .dialog.subscription iframe { height: 540px; width: 100%; border: none; } @charset "UTF-8"; /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ body.tablet .language-picker .loading, body.desktop .language-picker .loading { -webkit-animation: none 333ms linear infinite; -khtml-animation: none 333ms linear infinite; -moz-animation: none 333ms linear infinite; -ms-animation: none 333ms linear infinite; -o-animation: none 333ms linear infinite; animation: none 333ms linear infinite; } body.tablet .language-picker .loading, body.desktop .language-picker .loading { -webkit-animation-name: spin; -khtml-animation-name: spin; -moz-animation-name: spin; -ms-animation-name: spin; -o-animation-name: spin; animation-name: spin; -webkit-animation-duration: 1000ms; -khtml-animation-duration: 1000ms; -moz-animation-duration: 1000ms; -ms-animation-duration: 1000ms; -o-animation-duration: 1000ms; animation-duration: 1000ms; -webkit-animation-timing-function: linear; -khtml-animation-timing-function: linear; -moz-animation-timing-function: linear; -ms-animation-timing-function: linear; -o-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -khtml-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-iteration-count: infinite; } body.tablet .language-picker .loading, body.desktop .language-picker .loading { background: center center no-repeat; background-size: cover; background-image: url(data:image/png;base64,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); } /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ body.tablet .language-picker .loading, body.desktop .language-picker .loading { -webkit-animation: none 333ms linear infinite; -khtml-animation: none 333ms linear infinite; -moz-animation: none 333ms linear infinite; -ms-animation: none 333ms linear infinite; -o-animation: none 333ms linear infinite; animation: none 333ms linear infinite; } /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ body.tablet .language-picker .loading, body.desktop .language-picker .loading { background: center center no-repeat; background-size: cover; background-image: url(data:image/png;base64,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); } /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ body.tablet .language-picker .loading, body.desktop .language-picker .loading { -webkit-animation: none 333ms linear infinite; -khtml-animation: none 333ms linear infinite; -moz-animation: none 333ms linear infinite; -ms-animation: none 333ms linear infinite; -o-animation: none 333ms linear infinite; animation: none 333ms linear infinite; } body.tablet .language-picker .loading, body.desktop .language-picker .loading { -webkit-animation-name: spin; -khtml-animation-name: spin; -moz-animation-name: spin; -ms-animation-name: spin; -o-animation-name: spin; animation-name: spin; -webkit-animation-duration: 1000ms; -khtml-animation-duration: 1000ms; -moz-animation-duration: 1000ms; -ms-animation-duration: 1000ms; -o-animation-duration: 1000ms; animation-duration: 1000ms; -webkit-animation-timing-function: linear; -khtml-animation-timing-function: linear; -moz-animation-timing-function: linear; -ms-animation-timing-function: linear; -o-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -khtml-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-iteration-count: infinite; } /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ /* ------------------------------------------------------------- Mixins meant to replace the use of z-index completely. These allow developers to focus on the intent of positioning as named layers. Each of these mixins accepts an $adjust value, which is there to allow you to prioritize multiple elements in the same layer. Mixins available: - layer-background Arguments: [$adjust] Adds approprite z-index value for elements that are meant to be below the page's main content - layer-midground Arguments: [$adjust] Adds appropriate z-index value for elements that are the page's primary content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that are meant to be priminent / above the main content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that should appear above everything else (IE - modals) ------------------------------------------------------------- */ /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ .language-picker .settings-interactive { position: relative; } body.tablet .language-picker .loading, body.desktop .language-picker .loading { display: inline-block; position: static; vertical-align: middle; margin: 0 0 0 10px; width: 24px; height: 24px; overflow: hidden; vertical-align: middle; display: inline-block; } body.mobile .language-picker .loading { position: absolute; } .language-picker .fancy-selector { width: 280px; } body.mobile .language-picker .fancy-selector { width: 100%; } body.mobile .language-picker .fancy-selector .expanded-nav { width: 100%; } @charset "UTF-8"; /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ #hidden .selector { width: 100%; height: 100%; pointer-events: all !important; } #hidden .selector:before { -webkit-transform: scale(0.95); -khtml-transform: scale(0.95); -moz-transform: scale(0.95); -ms-transform: scale(0.95); -o-transform: scale(0.95); transform: scale(0.95); } @charset "UTF-8"; /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ /* ------------------------------------------------------------- Mixins meant to replace the use of z-index completely. These allow developers to focus on the intent of positioning as named layers. Each of these mixins accepts an $adjust value, which is there to allow you to prioritize multiple elements in the same layer. Mixins available: - layer-background Arguments: [$adjust] Adds approprite z-index value for elements that are meant to be below the page's main content - layer-midground Arguments: [$adjust] Adds appropriate z-index value for elements that are the page's primary content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that are meant to be priminent / above the main content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that should appear above everything else (IE - modals) ------------------------------------------------------------- */ #this-day .this-day-head .back:before { font-family: "fontIcons"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; text-transform: none; } /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ #this-day { padding-top: 75px; } #this-day .this-day-head { position: relative; background: url(https://images-na.ssl-images-amazon.com/images/G/01/digital/photos/thisday-header._V278012493_.png) 0 0 no-repeat; background-size: 1350px 186px; background-position: center; height: 250px; } @media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) { #this-day .this-day-head { background-image: url(https://images-na.ssl-images-amazon.com/images/G/01/digital/photos/thisday-header_2x._V278032384_.png); } } #this-day .this-day-head .back { position: absolute; line-height: 75px; left: 0; top: 0; } #this-day .this-day-head .back:before { content: "\E007"; font-size: 10px; line-height: 10px; vertical-align: middle; display: inline-block; z-index: 101; position: relative; } #this-day .this-day-head .back:hover { color: #3d7eda; } #this-day .this-day-head .back span { margin-left: 5px; } body.mobile #this-day .this-day-head .back { line-height: 25px; } body.mobile #this-day .this-day-head .back span { display: none; } #this-day .this-day-head .meta { text-align: center; line-height: 25px; margin: 0 auto; padding-top: 68px; width: 210px; } #this-day .this-day-head .meta .day { font-size: 48px; color: #F28495; line-height: 40px; } #this-day .this-day-head .meta .month { text-transform: uppercase; font-size: 14px; font-weight: 700; color: #cdd2db; } #this-day .this-day-head .meta .text { font-size: 16px; font-weight: 900; line-height: 20px; color: #7985a3; } #this-day .this-day-head .meta .text div { font-weight: normal; } body.mobile #this-day .this-day-head { height: 120px; background-size: 726px 100px; } body.mobile #this-day .this-day-head .meta { padding-top: 15px; } body.mobile #this-day .this-day-head .meta .day { font-size: 24px; line-height: 24px; } body.mobile #this-day .this-day-head .meta .text { font-size: 14px; line-height: 15px; } #this-day h3 { text-align: center; font-weight: bold; margin: 20px 0 10px 0; } #this-day .this-day-picker { width: 100%; border-bottom: 1px solid #EEE; padding-bottom: 7px; } #this-day .mosaic-wrapper { font-size: 26px; height: 250px; margin-bottom: 20px; } #this-day .mosaic-wrapper .mosaic { position: absolute; } @charset "UTF-8"; /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ /* ------------------------------------------------------------- Mixins meant to replace the use of z-index completely. These allow developers to focus on the intent of positioning as named layers. Each of these mixins accepts an $adjust value, which is there to allow you to prioritize multiple elements in the same layer. Mixins available: - layer-background Arguments: [$adjust] Adds approprite z-index value for elements that are meant to be below the page's main content - layer-midground Arguments: [$adjust] Adds appropriate z-index value for elements that are the page's primary content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that are meant to be priminent / above the main content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that should appear above everything else (IE - modals) ------------------------------------------------------------- */ /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ .this-day-picker { position: relative; } .this-day-picker ul { position: relative; text-align: center; } .this-day-picker ul li { display: inline-block; vertical-align: top; width: 250px; position: relative; } .this-day-picker ul li:before { content: ''; display: block; padding-top: 65%; } body.mobile .this-day-picker ul li { width: 50%; } .this-day-picker ul li figure { position: absolute; top: 0; left: 4px; right: 4px; bottom: 8px; border-radius: 4px; overflow: hidden; border: 0px solid #3a89f6; -webkit-transition: border 100ms ease, border-radius 100ms ease; -khtml-transition: border 100ms ease, border-radius 100ms ease; -moz-transition: border 100ms ease, border-radius 100ms ease; -ms-transition: border 100ms ease, border-radius 100ms ease; -o-transition: border 100ms ease, border-radius 100ms ease; transition: border 100ms ease, border-radius 100ms ease; } .this-day-picker ul li figure .bg-image { border-radius: 4px; -webkit-transition: border-radius 100ms ease; -khtml-transition: border-radius 100ms ease; -moz-transition: border-radius 100ms ease; -ms-transition: border-radius 100ms ease; -o-transition: border-radius 100ms ease; transition: border-radius 100ms ease; } .this-day-picker ul li.selected figure { border-width: 4px; } .this-day-picker ul li.selected .bg-image { border-radius: 0; } .this-day-picker ul li .title-text { text-align: left; position: absolute; bottom: 15px; left: 15px; right: 15px; color: #fff; font-size: 16px; font-weight: 700; text-shadow: 0 1px 1px rgba(5, 5, 5, 0.2); } .this-day-picker ul li .play, .this-day-picker ul li .duration { display: none; } @charset "UTF-8"; /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ #trash .empty-trash { display: inline-block; padding: 0 15px; height: 2.5em; line-height: 2.5em; border-radius: 4px; text-align: center; border: none; font-family: inherit; font-size: inherit; font-weight: bold; letter-spacing: 0.4px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #trash .empty-trash:disabled, #trash .disabled.empty-trash { cursor: default; } #trash .empty-trash + a, #trash .empty-trash + button { margin-left: 15px; } #trash .empty-trash { background: none; color: inherit; } #trash .empty-trash:enabled:hover, #trash .empty-trash:enabled:focus, #trash .empty-trash:enabled:active, #trash .empty-trash:enabled.active { color: inherit; background: none; } /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /* ------------------------------------------------------------- General mixin utilities for assisting development Mixins available: - center Arguments: [$vertical, $horizontal] Defaults: true, false Adds styling for centering an element. Default is vertical only, but you can choose vertical, horizontal or both - caret Arguments: [$size, $color, $direction, $correctPosition] Defaults: 15px, $color-site-background, right, false Adds a caret / triangle arrow pseudo-element to your selected element. Specify what size, color, and pointing direction you need. correctPosition will make the center of the caret be in the same position regardless of which direction it's pointing. - icon-spinner Arguments: [$size] Defaults: 25px Since spinners have a tendency to animate wobbly, this will apply all the necessary CSS to make it appear perfectly. Includes the spin animation. - photo-grid-item Arguments: $mobile, [$tablet, $desktop, $large, $xlarge] This will create a photo grid with the x-across specified for each breakpoint. Breakpoints are mobile-first, and if you don't specify any beyond the first, it will be the same across at all sizes This will also remove the carets from the correct date items that appear at the end of each row Example: @include photo-grid-item(2, 3, 4); - disable-caret Arguments: $number Removes carets from every $number items. Used to make sure that date items don't have carets if they're at the end of a row It's really just a private method for photo-grid-item; there shouldn't be much reason to use it elsewhere - force-relative-height Arguments: $percentage This forces an element to have a height $percentage % its width; If you set it to 100%, it will be a perfect square no matter what the element's width. - overflow-ellipsis Arguments: none This adds ellipsis overflow to the element ------------------------------------------------------------- */ /* caret * Create a caret triangle/arrow in any direction you choose * Arguments: $size - The width of the caret. The height will always be half this value. * $color - The color fill of the caret * $direction - Direction that the arrow points * $correctPosition - When set to true, the position of the caret will be adjusted so the arrow is always in the same location regardless of direction * Usage: @include caret(30px, $color-blue, down, true); */ /* ------------------------------------------------------------- Mixins meant to replace the use of z-index completely. These allow developers to focus on the intent of positioning as named layers. Each of these mixins accepts an $adjust value, which is there to allow you to prioritize multiple elements in the same layer. Mixins available: - layer-background Arguments: [$adjust] Adds approprite z-index value for elements that are meant to be below the page's main content - layer-midground Arguments: [$adjust] Adds appropriate z-index value for elements that are the page's primary content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that are meant to be priminent / above the main content - layer-background Arguments: [$adjust] Adds appropriate z-index value for elements that should appear above everything else (IE - modals) ------------------------------------------------------------- */ /* ------------------------------------------------------------- These mixins are for handling icons across our applications. Mixins available: - icon Arguments: $name, [$size], [$position], @content Defaults: none, 25px, 'before' Usage example: .element-that-needs-icon { @include icon('delete', 25px, 'before') { margin-right: 10px; } } Outputs to: .icon-delete, .element-that-needs-icon { [icon sprite CSS] } .icon-delete:before { display: inline-block; content: '\E007'; font-size: 25px; margin-right: 10px; } The element you add this mixin to will receive a before/after pseudo element that contains the icon. @content gets output inside the pseudo element, allowing you to add any custom styles needed (in this case, a margin between it and the text content of .element-that-needs-icon) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ #trash .selector { width: 100%; height: 100%; pointer-events: all !important; } #trash .selector:before { -webkit-transform: scale(0.95); -khtml-transform: scale(0.95); -moz-transform: scale(0.95); -ms-transform: scale(0.95); -o-transform: scale(0.95); transform: scale(0.95); } #trash .play { pointer-events: none; } #trash .sectioned-scroll-list { top: 0; } #trash .play { pointer-events: none; } #trash .album-toggle { max-width: 400px; margin: 0 auto; border: 1px solid #EEE; border-radius: 5px; overflow: hidden; } body.mobile #trash .album-toggle { font-size: 0.7em; } #trash .album-toggle a { padding: 12px 15px; display: inline-block; vertical-align: middle; width: 50%; text-align: center; font-weight: bold; } #trash .album-toggle a.active { background: #3d7eda; color: #fff; } body.mobile #trash .empty-trash { display: none; } #trash .controls { margin-bottom: 22px; } #trash .controls .column-size { display: block; } #trash .controls .column { vertical-align: middle; } #trash .auto-purge-notice { position: relative; border: 2px solid #EEE; border-radius: 4px; margin-bottom: 30px; padding: 30px 170px; overflow: hidden; max-height: 150px; -webkit-transition: opacity 333ms ease, max-height 333ms ease, padding 333ms ease, margin 333ms ease; -khtml-transition: opacity 333ms ease, max-height 333ms ease, padding 333ms ease, margin 333ms ease; -moz-transition: opacity 333ms ease, max-height 333ms ease, padding 333ms ease, margin 333ms ease; -ms-transition: opacity 333ms ease, max-height 333ms ease, padding 333ms ease, margin 333ms ease; -o-transition: opacity 333ms ease, max-height 333ms ease, padding 333ms ease, margin 333ms ease; transition: opacity 333ms ease, max-height 333ms ease, padding 333ms ease, margin 333ms ease; } body.mobile #trash .auto-purge-notice { max-height: 250px; } #trash .auto-purge-notice.collapsed { opacity: 0; margin: 0; max-height: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; } #trash .auto-purge-notice svg { width: 100px; height: auto; position: absolute; left: 40px; top: 5px; } body.mobile #trash .auto-purge-notice { padding: 15px; } body.mobile #trash .auto-purge-notice svg { display: none; } body.tablet #trash .auto-purge-notice { padding-right: 15px; } /* ------------------------------------------------------------- Mixins for responsive breakpoints. These should be used in place of media queries to keep our breakpoints consistent across all packages. Mixins available: - mobile Arguments: @content Outputs @content wrapped in a classname that will show only on mobile - mobile-to-tablet Arguments: @content Outputs @content wrapped in a classname that will show only on mobile or tablet - tablet Arguments: @content Outputs @content wrapped in a classname that will show only on tablet - tablet-to-desktop Arguments: @content Outputs @content wrapped in a classname that will show only on tablet and desktop - desktop Arguments: @content Outputs @content wrapped in a classname that will show only on desktop - large Arguments: @content Outputs @content wrapped in a classname that will show only on large screen sizes - xlarge Arguments: @content Outputs @content wrapped in a classname that will show only on very large screen sizes - media-mobile Arguments: @content Outputs @content wrapped in a media query that will show only on mobile - media-mobile-to-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on mobile or tablet - media-tablet Arguments: @content Outputs @content wrapped in a media query that will show only on tablet - media-tablet-to-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on tablet and desktop - media-desktop Arguments: @content Outputs @content wrapped in a media query that will show only on desktop - lmedia-arge Arguments: @content Outputs @content wrapped in a media query that will show only on large screen sizes - xmedia-large Arguments: @content Outputs @content wrapped in a media query that will show only on very large screen sizes - min-width Arguments: $width, @content Outputs @content wrapped in a min-width: $width media query - max-width Arguments: $width, @content Outputs @content wrapped in a max-width: $width media query - min-max-width Arguments: $min, $max, @content Outputs @content wrapped in a max-width: $max and min-width: $min media query - hd-display Arguments: @content Outputs @content wrapped in a retina/HD display target media query ------------------------------------------------------------- */ /** CSS media query breakpoints **/ @media screen and (min-width: 701px) { #report-abuse-page { text-align: center; } #report-abuse-page header { height: 0; } #report-abuse-page .report-abuse { display: inline-block; text-align: left; } }