@charset "UTF-8"; /* * Overriding css classes from core assets * This isn't a great way of dealing with this, but for the moment it's how it's going to be * Each override definition in here should have duplicate classnames (IE .button.button) to add +1 to the specificity * This is to ensure that they are actually overriding the core selectors */ .dialog.dialog .dialog-head { background: #3A89F6; } .toast.toast .toast-inner { background: #3A89F6; } .toast.toast .toast-additional-content .additional-error-content a { color: #3A89F6 !important; } .toast.toast.fail .column-2 a, .toast.toast.error .column-2 a { color: #3A89F6 !important; } .icon-add-to-group:before, .icon-add:before, .icon-album:before, .icon-all: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: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-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) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation 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; } } @font-face { font-family: "fontIcons"; src: url(data:application/vnd.ms-fontobject;base64,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AADgDQAAAA0AAOAOAADgDgAAAA4AAOAPAADgDwAAAA8AAOAQAADgEAAAABAAAOARAADgEQAAABEAAOASAADgEgAAABIAAOATAADgEwAAABMAAOAUAADgFAAAABQAAOAVAADgFQAAABUAAOAWAADgFgAAABYAAOAXAADgFwAAABcAAOAYAADgGAAAABgAAOAZAADgGQAAABkAAOAaAADgGgAAABoAAOAbAADgGwAAABsAAOAcAADgHAAAABwAAOAdAADgHQAAAB0AAOAeAADgHgAAAB4AAOAfAADgHwAAAB8AAOAgAADgIAAAACAAAOAhAADgIQAAACEAAOAiAADgIgAAACIAAOAjAADgIwAAACMAAOAkAADgJAAAACQAAOAlAADgJQAAACUAAOAmAADgJgAAACYAAOAnAADgJwAAACcAAOAoAADgKAAAACgAAOApAADgKQAAACkAAOAqAADgKgAAACoAAOArAADgKwAAACsAAOAsAADgLAAAACwAAOAtAADgLQAAAC0AAOAuAADgLgAAAC4AAOAvAADgLwAAAC8AAOAwAADgMAAAADAAAOAxAADgMQAAADEAAOAyAADgMgAAADIAAOAzAADgMwAAADMAAOA0AADgNAAAADQAAOA1AADgNQAAADUAAOA2AADgNgAAADYAAOA3AADgNwAAADcAAOA4AADgOAAAADgAAOA5AADgOQAAADkAAOA6AADgOgAAADoAAOA7AADgOwAAADsAAOA8AADgPAAAADwAAOA9AADgPQAAAD0AAOA+AADgPgAAAD4AAOA/AADgPwAAAD8AAOBAAADgQAAAAEAAAOBBAADgQQAAAEEAAOBCAADgQgAAAEIAAOBDAADgQwAAAEMAAOBEAADgRAAAAEQAAOBFAADgRQAAAEUAAOBGAADgRgAAAEYAAOBHAADgRwAAAEcAAOBIAADgSAAAAEgAAOBJAADgSQAAAEkAAOBKAADgSgAAAEoAAOBLAADgSwAAAEsAAOBMAADgTAAAAEwAAOBNAADgTQAAAE0AAOBOAADgTgAAAE4AAOBPAADgTwAAAE8AAOBQAADgUAAAAFAAAOBRAADgUQAAAFEAAOBSAADgUgAAAFIAAOBTAADgUwAAAFMAAOBUAADgVAAAAFQAAOBVAADgVQAAAFUAAOBWAADgVgAAAFYAAOBXAADgVwAAAFcAAOBY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ZXIEYmFjawRiaWxsBmJyb2tlbgtjYW1lcmEtYm9keQZjYW1lcmEKY2hhbmdlLXRhZwljaGVja21hcmsMY2hldnJvbl9kb3duDGNoZXZyb25fbGVmdA1jaGV2cm9uX3JpZ2h0CmNoZXZyb25fdXAQY2lyY2xlLWNoZWNrbWFyawVjbG9jawtkZWxldGUtdGhpbgZkZWxldGUHZGVza3RvcAdkaXNsaWtlBGRvd24JZG93bmFycm93CGRvd25sb2FkCGVkaXQtcGVuCWVkaXQtdGFncwRlZGl0BWVtYWlsBWVycm9yCGZhY2Vib29rBWZhY2VzBmZhbWlseQtmYW1pbHlfcGx1cwpmaWxlLWV4Y2VsCGZpbGUtZXhlC2ZpbGUtZm9sZGVyDGZpbGUtZ2VuZXJpYwlmaWxlLWh0bWwKZmlsZS1tdXNpYwhmaWxlLXBkZg9maWxlLXBvd2VycG9pbnQIZmlsZS10eHQJZmlsZS13b3JkCGZpbGUtemlwBGZpbGUFZmlsZXMEZmxhZwZmb2xkZXINZ2V0LWFwcHMtaWNvbgdnby1saW5rBmdyb3VwcwRoZWxwBGhpZGUEaG9tZQppbmRpdmlkdWFsBGluZm8EbGVmdARsaWtlBGxpbmsIbG9jYXRpb24NbG9ja2VkLWZvbGRlcgVtZXJnZQZtb2JpbGUEbW9yZQRtb3ZlCm5ldy1mb2xkZXIIb3ZlcmZsb3cGcGVyc29uBXBob3RvC3Bob3Rvcy1tb25vDXBob3Rvcy12aWRlb3MGcHJpbnRzBnJlY2VudBFyZW1vdmUtZnJvbS1ncm91cApyZW1vdmUtdGFnBnJlbmFtZQdyZXN0b3JlBXJpZ2h0BnNlYXJjaAZzZWxlY3QNc2VuZF9mZWVkYmFjawhzZXR0aW5ncwhzaGFyZS12MgVzaGFyZQdzaWdub3V0B3N0b3JhZ2UEc3luYwd0aGlzZGF5B3R3aXR0ZXIGdW5oaWRlCXVubGltaXRlZAd1bnNoYXJlD3VwLWFycm93LWNpcmNsZQJ1cAx1cGRhdGUtYWxidW0NdXBsb2FkLWZvbGRlcgZ1cGxvYWQJdXBsb2FkaW5nFnZpZGVvLWVudGVyLWZ1bGxzY3JlZW4VdmlkZW8tZXhpdC1mdWxsc2NyZWVuEXZpZGVvLWhpZ2gtdm9sdW1lCnZpZGVvLW11dGULdmlkZW8tcGF1c2UKdmlkZW8tcGxheQx2aWRlby1zcXVhcmUFdmlkZW8Hd2FybmluZwF4AAAAAAA=) 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-appswitcher:before { content: "\E005"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-back:before { content: "\E006"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-bill:before { content: "\E007"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-broken:before { content: "\E008"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-camera-body:before { content: "\E009"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-camera:before { content: "\E00A"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-change-tag:before { content: "\E00B"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-checkmark:before { content: "\E00C"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-chevron_down:before { content: "\E00D"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-chevron_left:before { content: "\E00E"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-chevron_right:before { content: "\E00F"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-chevron_up:before { content: "\E010"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-circle-checkmark:before { content: "\E011"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-clock:before { content: "\E012"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-delete-thin:before { content: "\E013"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-delete:before { content: "\E014"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-desktop:before { content: "\E015"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-dislike:before { content: "\E016"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-down:before { content: "\E017"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-downarrow:before { content: "\E018"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-download:before { content: "\E019"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-edit-pen:before { content: "\E01A"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-edit-tags:before { content: "\E01B"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-edit:before { content: "\E01C"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-email:before { content: "\E01D"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-error:before { content: "\E01E"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-facebook:before { content: "\E01F"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-faces:before { content: "\E020"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-family:before { content: "\E021"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-family_plus:before { content: "\E022"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-file-excel:before { content: "\E023"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-file-exe:before { content: "\E024"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-file-folder:before { content: "\E025"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-file-generic:before { content: "\E026"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-file-html:before { content: "\E027"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-file-music:before { content: "\E028"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-file-pdf:before { content: "\E029"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-file-powerpoint:before { content: "\E02A"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-file-txt:before { content: "\E02B"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-file-word:before { content: "\E02C"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-file-zip:before { content: "\E02D"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-file:before { content: "\E02E"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-files:before { content: "\E02F"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-flag:before { content: "\E030"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-folder:before { content: "\E031"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-get-apps-icon:before { content: "\E032"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-go-link:before { content: "\E033"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-groups:before { content: "\E034"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-help:before { content: "\E035"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-hide:before { content: "\E036"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-home:before { content: "\E037"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-individual:before { content: "\E038"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-info:before { content: "\E039"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-left:before { content: "\E03A"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-like:before { content: "\E03B"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-link:before { content: "\E03C"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-location:before { content: "\E03D"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-locked-folder:before { content: "\E03E"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-merge:before { content: "\E03F"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-mobile:before { content: "\E040"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-more:before { content: "\E041"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-move:before { content: "\E042"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-new-folder:before { content: "\E043"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-overflow:before { content: "\E044"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-person:before { content: "\E045"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-photo:before { content: "\E046"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-photos-mono:before { content: "\E047"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-photos-videos:before { content: "\E048"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-prints:before { content: "\E049"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-recent:before { content: "\E04A"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-remove-from-group:before { content: "\E04B"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-remove-tag:before { content: "\E04C"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-rename:before { content: "\E04D"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-restore:before { content: "\E04E"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-right:before { content: "\E04F"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-search:before { content: "\E050"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-select:before { content: "\E051"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-send_feedback:before { content: "\E052"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-settings:before { content: "\E053"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-share-v2:before { content: "\E054"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-share:before { content: "\E055"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-signout:before { content: "\E056"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-storage:before { content: "\E057"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-sync:before { content: "\E058"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-thisday:before { content: "\E059"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-twitter:before { content: "\E05A"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-unhide:before { content: "\E05B"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-unlimited:before { content: "\E05C"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-unshare:before { content: "\E05D"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-up-arrow-circle:before { content: "\E05E"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-up:before { content: "\E05F"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-update-album:before { content: "\E060"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-upload-folder:before { content: "\E061"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-upload:before { content: "\E062"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-uploading:before { content: "\E063"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-video-enter-fullscreen:before { content: "\E064"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-video-exit-fullscreen:before { content: "\E065"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-video-high-volume:before { content: "\E066"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-video-mute:before { content: "\E067"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-video-pause:before { content: "\E068"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-video-play:before { content: "\E069"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-video-square:before { content: "\E06A"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-video:before { content: "\E06B"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-warning:before { content: "\E06C"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .icon-x:before { content: "\E06D"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .button-ghost, .button, .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; } .button-ghost:disabled, .button:disabled, .button-secondary:disabled, .disabled.button-ghost, .disabled.button, .disabled.button-secondary { cursor: default; } .button-ghost + a, .button + a, .button-secondary + a, .button-ghost + button, .button + button, .button-secondary + button { margin-left: 15px; } .button-ghost { background: none; color: inherit; } .button-ghost:enabled:hover, .button-ghost:enabled:focus, .button-ghost:enabled:active, .button-ghost:enabled.active { color: inherit; background: none; } .button-ghost { border: 1px solid #EEE; } .button-ghost, .button, .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; } .button-ghost:disabled, .button:disabled, .button-secondary:disabled, .disabled.button-ghost, .disabled.button, .disabled.button-secondary { cursor: default; } .button-ghost + a, .button + a, .button-secondary + a, .button-ghost + button, .button + button, .button-secondary + button { margin-left: 15px; } .button-ghost { background: none; color: inherit; } .button-ghost:enabled:hover, .button-ghost:enabled:focus, .button-ghost:enabled:active, .button-ghost:enabled.active { color: inherit; background: none; } .button-ghost { border: 1px solid #EEE; } .button { background: #3A89F6; color: #fff; } .button:enabled:hover { background-color: #6ba6f8; color: #fff; } .button:enabled:active, .button:enabled.active, .button:enabled:focus { background-color: #5298f7; color: #fff; } .button:disabled, .disabled.button { background-color: #9cc3fa; color: #fff; } .button-secondary { background: #7985a3; color: #fff; } .button-secondary:enabled:hover { background-color: #97a1b8; color: #fff; } .button-secondary:enabled:active, .button-secondary:enabled.active, .button-secondary:enabled:focus { background-color: #8893ad; color: #fff; } .button-secondary:disabled, .disabled.button-secondary { background-color: #b5bccd; color: #fff; } .button-ghost { color: #333; } .button-ghost:enabled:hover { color: #6ba6f8; } .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); */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation 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 { 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: #333; position: relative; -webkit-font-smoothing: antialiased; font-size: 14px; line-height: 18px; } body.full-screen { overflow: hidden; } *, *:before, *:after { -webkit-box-sizing: border-box; -khtml-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } a, button { text-decoration: none; color: #3A89F6; } a:hover, a:active, a:focus, button:hover, button:active, button:focus { color: #6ba6f8; } 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; filter: alpha(opacity=40); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; -webkit-opacity: 0.4; -khtml-opacity: 0.4; -moz-opacity: 0.4; -ms-opacity: 0.4; -o-opacity: 0.4; opacity: 0.4; } button:active { outline: none; } .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: "\E06D"; 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: "\E06D"; 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: "\E006"; 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"; .dialog.onboarding nav:after { content: ''; display: block; clear: both; } .dialog.onboarding .send-mobile-app 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; } /* ------------------------------------------------------------- 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.onboarding nav: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.onboarding nav button.skip:after, .dialog.onboarding nav button.next:after, .dialog.onboarding nav button.back:before, .dialog.onboarding .send-mobile-app .success span:first-child: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.onboarding .send-mobile-app button.resend-sms, .dialog.onboarding .button-container .next, .dialog.onboarding .button-container .done, .dialog.onboarding .send-mobile-app button.send-msg { 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.onboarding .send-mobile-app button.resend-sms:disabled, .dialog.onboarding .button-container .next:disabled, .dialog.onboarding .button-container .done:disabled, .dialog.onboarding .send-mobile-app button.send-msg:disabled, .dialog.onboarding .send-mobile-app button.disabled.resend-sms, .dialog.onboarding .button-container .disabled.next, .dialog.onboarding .button-container .disabled.done, .dialog.onboarding .send-mobile-app button.disabled.send-msg { cursor: default; } .dialog.onboarding .send-mobile-app button.resend-sms + a, .dialog.onboarding .button-container .next + a, .dialog.onboarding .button-container .done + a, .dialog.onboarding .send-mobile-app button.send-msg + a, .dialog.onboarding .send-mobile-app button.resend-sms + button, .dialog.onboarding .button-container .next + button, .dialog.onboarding .button-container .done + button, .dialog.onboarding .send-mobile-app button.send-msg + button { margin-left: 15px; } .dialog.onboarding .send-mobile-app button.resend-sms { background: none; color: inherit; } .dialog.onboarding .send-mobile-app button.resend-sms:enabled:hover, .dialog.onboarding .send-mobile-app button.resend-sms:enabled:focus, .dialog.onboarding .send-mobile-app button.resend-sms:enabled:active, .dialog.onboarding .send-mobile-app button.resend-sms:enabled.active { color: inherit; background: none; } .dialog.onboarding .send-mobile-app button.resend-sms { border: 1px solid #EEE; } .dialog.onboarding .button-container .next, .dialog.onboarding .button-container .done, .dialog.onboarding .send-mobile-app button.send-msg { background: #3A89F6; color: #fff; } .dialog.onboarding .button-container .next:enabled:hover, .dialog.onboarding .button-container .done:enabled:hover, .dialog.onboarding .send-mobile-app button.send-msg:enabled:hover { background-color: #6ba6f8; color: #fff; } .dialog.onboarding .button-container .next:enabled:active, .dialog.onboarding .button-container .done:enabled:active, .dialog.onboarding .send-mobile-app button.send-msg:enabled:active, .dialog.onboarding .button-container .next:enabled.active, .dialog.onboarding .button-container .done:enabled.active, .dialog.onboarding .send-mobile-app button.send-msg:enabled.active, .dialog.onboarding .button-container .next:enabled:focus, .dialog.onboarding .button-container .done:enabled:focus, .dialog.onboarding .send-mobile-app button.send-msg:enabled:focus { background-color: #5298f7; color: #fff; } .dialog.onboarding .button-container .next:disabled, .dialog.onboarding .button-container .done:disabled, .dialog.onboarding .send-mobile-app button.send-msg:disabled, .dialog.onboarding .button-container .disabled.next, .dialog.onboarding .button-container .disabled.done, .dialog.onboarding .send-mobile-app button.disabled.send-msg { background-color: #9cc3fa; color: #fff; } .dialog.onboarding .send-mobile-app button.resend-sms { color: #333; } .dialog.onboarding .send-mobile-app button.resend-sms:enabled:hover { color: #6ba6f8; } .dialog.onboarding { text-align: center; width: 600px; } .dialog.onboarding nav { margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid #EEE; } .dialog.onboarding nav button.skip, .dialog.onboarding nav button.next { float: right; } .dialog.onboarding nav button.skip:after, .dialog.onboarding nav button.next:after { content: "\E04F"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; margin-left: 5px; } .dialog.onboarding nav button.back { float: left; } .dialog.onboarding nav button.back:before { content: "\E03A"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; margin-right: 5px; } .dialog.onboarding .main-image { margin: 15px 0; display: inline-block; } .dialog.onboarding .button-container { margin: 15px 0; } .dialog.onboarding h1 { font-size: 1.8em; font-weight: normal; color: #050505; } .dialog.onboarding .welcome-onboarding .main-image { width: 192px; height: 157px; background: url("https://images-na.ssl-images-amazon.com/images/G/01/digital/adrive/protect/Welcome_UE.png"); } .dialog.onboarding .download-desktop .retry { margin-left: 5px; } .dialog.onboarding .download-desktop .main-image { background: url("https://images-na.ssl-images-amazon.com/images/G/01/digital/adrive/protect/desktop_download.png") 0 0 no-repeat; background-size: cover; max-width: 553px; max-height: 121px; width: 100%; position: relative; } .dialog.onboarding .download-desktop .main-image:before { content: ''; display: block; padding-top: 22.7%; } .dialog.onboarding .send-mobile-app .legal-msg { max-width: 400px; font-size: 0.8em; color: #7985a3; line-height: 1.3em; margin: 15px auto; } .dialog.onboarding .send-mobile-app .main-image { width: 224px; height: 168px; background: url("https://images-na.ssl-images-amazon.com/images/G/01/digital/adrive/protect/mobile_app.png") 0 0 no-repeat; } .dialog.onboarding .send-mobile-app input { margin-right: 10px; height: 3em; width: 200px; display: inline-block; } .dialog.onboarding .send-mobile-app input.error { border: 1px solid #ff0000; } .dialog.onboarding .send-mobile-app p.error { color: #ff0000; } .dialog.onboarding .send-mobile-app button.resend-sms { vertical-align: bottom; } .dialog.onboarding .send-mobile-app button.next { vertical-align: bottom; } .dialog.onboarding .send-mobile-app .success span:first-child:before { content: "\E00C"; font-size: 1.2em; line-height: 1.2em; vertical-align: middle; display: inline-block; color: #71DA60; margin-right: 5px; } .dialog.onboarding .send-mobile-app .success-number { margin-left: 5px; font-weight: bold; color: #050505; font-size: 1.2em; } .dialog.onboarding .onboarding-complete .main-image { width: 301px; height: 141px; background: url("https://images-na.ssl-images-amazon.com/images/G/01/digital/adrive/protect/success_laptopphone.png") 0 0 no-repeat; } @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) ------------------------------------------------------------- */ /* ------------------------------------------------------------- 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 **/ #primary-header .search-field-toggle .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) ------------------------------------------------------------- */ #primary-header .search-field-toggle .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; } #primary-header .search-field-toggle .toggle:disabled, #primary-header .search-field-toggle .disabled.toggle { cursor: default; } #primary-header .search-field-toggle .toggle + a, #primary-header .search-field-toggle .toggle + button { margin-left: 15px; } #primary-header .search-field-toggle .toggle { background: #3A89F6; color: #fff; } #primary-header .search-field-toggle .toggle:enabled:hover { background-color: #6ba6f8; color: #fff; } #primary-header .search-field-toggle .toggle:enabled:active, #primary-header .search-field-toggle .toggle:enabled.active, #primary-header .search-field-toggle .toggle:enabled:focus { background-color: #5298f7; color: #fff; } #primary-header .search-field-toggle .toggle:disabled, #primary-header .search-field-toggle .disabled.toggle { background-color: #9cc3fa; color: #fff; } /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation 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) ------------------------------------------------------------- */ /* ------------------------------------------------------------- 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 **/ #primary-header .search-field-toggle .toggle { width: 35px; line-height: 35px; text-align: center; padding: 0; } #primary-header .search-field-toggle .toggle:before { content: "\E050"; font-size: 18px; line-height: 18px; vertical-align: middle; display: inline-block; } #primary-header { position: fixed; top: 0; left: 0; right: 0; height: 55px; line-height: 55px; border-bottom: 1px solid #EEE; padding: 0 25px; display: flex; background-color: #fff; background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(rgba(255, 255, 255, 0.9))); background-image: -webkit-linear-gradient(top, #fff, rgba(255, 255, 255, 0.9)); background-image: -moz-linear-gradient(top, #fff, rgba(255, 255, 255, 0.9)); background-image: -ms-linear-gradient(top, #fff, rgba(255, 255, 255, 0.9)); background-image: -o-linear-gradient(top, #fff, rgba(255, 255, 255, 0.9)); background-image: linear-gradient(top, #fff, rgba(255, 255, 255, 0.9)); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fff', endColorStr='rgba(255, 255, 255, 0.9)'); background-color: transparent; z-index: 201; } @media screen and (max-width: 700px) { #primary-header { padding: 0 10px 0 20px; } } #primary-header .search-container { flex-grow: 1; padding-left: 25px; } #primary-header .search-container .search-field { vertical-align: middle; width: 100%; max-width: 700px; } @media screen and (max-width: 700px) { #primary-header .search-container { padding: 0; text-align: right; } } #primary-header .actions { flex-shrink: 1; text-align: right; } #primary-header .files-logo { flex-shrink: 1; } #primary-header .files-logo svg { vertical-align: middle; display: inline-block; width: 150px; } #primary-header .upload-button .toggle { height: 35px; width: 35px; line-height: 35px; padding: 0; margin: 0 10px; } #primary-header .upload-button .toggle span { display: none; } @media screen and (min-width: 701px) { #primary-header .upload-button { display: none; } } #primary-header .user-menu .toggle { position: relative; right: -10px; } @media screen and (max-width: 700px) { #primary-header .user-menu .toggle { right: 0; } } #primary-header .search-field-toggle { vertical-align: middle; } #primary-header .search-field-toggle .expanded-nav { right: -3px; } @charset "UTF-8"; .upload-button .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; } .upload-button .toggle:disabled, .upload-button .disabled.toggle { cursor: default; } .upload-button .toggle + a, .upload-button .toggle + button { margin-left: 15px; } .upload-button .toggle:before, .upload-button .expandable-nav .upload-file:before, .upload-button .expandable-nav .upload-folder: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) ------------------------------------------------------------- */ .upload-button .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; } .upload-button .toggle:disabled, .upload-button .disabled.toggle { cursor: default; } .upload-button .toggle + a, .upload-button .toggle + button { margin-left: 15px; } .upload-button .toggle { background: #3A89F6; color: #fff; } .upload-button .toggle:enabled:hover { background-color: #6ba6f8; color: #fff; } .upload-button .toggle:enabled:active, .upload-button .toggle:enabled.active, .upload-button .toggle:enabled:focus { background-color: #5298f7; color: #fff; } .upload-button .toggle:disabled, .upload-button .disabled.toggle { background-color: #9cc3fa; color: #fff; } .upload-button { position: relative; display: inline-block; vertical-align: middle; } .upload-button p { padding: 10px; font-size: 0.8em; margin: 0; } .upload-button .toggle:before { content: "\E05E"; font-size: 16px; line-height: 16px; vertical-align: middle; display: inline-block; } .upload-button .toggle span { margin-left: 5px; } .upload-button .expandable-nav { line-height: normal; } .upload-button .expandable-nav .expanded-nav { min-width: 200px; padding: 0; top: calc(100% + 10px); } .upload-button .expandable-nav .expanded-nav.left { left: 0; } .upload-button .expandable-nav .expanded-nav.right { right: 0; } .upload-button .expandable-nav .expanded-nav li { border-bottom: 1px solid #EEE; } .upload-button .expandable-nav .expanded-nav ul button { color: #333; padding: 10px 15px; display: block; } .upload-button .expandable-nav .expanded-nav ul button:hover { color: #6ba6f8; } .upload-button .expandable-nav .expanded-nav ul button:before { min-width: 20px; text-align: center; margin-right: 10px; } .upload-button .expandable-nav .upload-file:before { content: "\E026"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; } .upload-button .expandable-nav .upload-folder:before { content: "\E025"; 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) ------------------------------------------------------------- */ /* ------------------------------------------------------------- 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) ------------------------------------------------------------- */ /* ------------------------------------------------------------- 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); */ #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) ------------------------------------------------------------- */ #uploader-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: "\E06D"; 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: "\E01E"; 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: #3A89F6 !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; } .conflict-manager-dialog .conflict-details p { font-size: 1.2em; } .conflict-manager-dialog .conflict-details p > span { margin-bottom: 10px; } .conflict-manager-dialog .conflict-details .conflict-list-item { display: block; border: none; line-height: 25px; } .conflict-manager-dialog .conflict-details .conflict-list-item .detail { font-size: inherit; display: block; width: 100%; padding-top: 0; padding-bottom: 0; } .conflict-manager-dialog .conflict-details .new-file { margin-top: 15px; } .conflict-manager-dialog .apply-to-all-checkbox { padding-top: 15px; display: block; } .conflict-manager-dialog footer { padding-top: 0; } .conflict-manager-dialog footer button { margin-top: 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); */ .file-list-item .select-all:before, .file-list-item .select-item:before, .file-list-item .go-to-parent-folder:before, .file-list-item .sort.active:after, .file-list-item .sort-by .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) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ .file-list-item { width: 100%; box-sizing: content-box; position: relative; display: flex; line-height: 30px; border-bottom: 1px solid #EEE; color: #7985a3; } .placeholder .file-list-item .detail, .file-list-item.placeholder .detail { visibility: hidden; } .placeholder .file-list-item .detail:after, .file-list-item.placeholder .detail:after { content: '-'; } .file-list-item .node-icon { margin-right: 15px; vertical-align: middle; color: #7985a3; } .file-list-item .node-icon:before { position: absolute; left: 0; } .file-list-item .detail { padding: 10px; flex-shrink: 0; color: inherit; } .file-list-item .detail > span { width: 100%; } .file-list-item .Selector { width: 35px; text-align: center; white-space: nowrap; } .file-list-item .FileName { position: relative; flex-grow: 1; width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .file-list-item:not(.header) .FileName { padding-left: 45px; } .file-list-item:not(.header) .FileName, .file-list-item:not(.header) .FileName a { color: #333; } .file-list-item:not(.header) .FileName a:hover { color: #6ba6f8; } .file-list-item:not(.header) .FileName .node-icon { 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: 10px; } .file-list-item .Extension, .file-list-item .DateCreated, .file-list-item .DateModified { width: 230px; } .file-list-item .Size { width: 80px; } .file-list-item.selectable:not(.selected):hover { background: #F6F7FD; } .file-list-item.selected { background: #CCE8FF; border-left: 4px solid #3A89F6; left: -4px; border-bottom: 1px solid #fff; color: #050505; } .file-list-item.header { border-bottom: 1px solid #fff; background: #EEE; font-size: 0.8em; line-height: normal; height: 34px; } .file-list-item.header .Extension .sort, .file-list-item.header .DateCreated .sort, .file-list-item.header .DateModified .sort { width: 50%; } .file-list-item.header .detail { border-bottom: 1px solid #fff; border-top: 1px solid #fff; padding-left: 0px; } .file-list-item.header .detail .column-name { padding-left: 10px; color: #666; font-weight: bold; } .file-list-item.header .detail.FileName, .file-list-item.header .detail.DateModified, .file-list-item.header .detail.DateCreated, .file-list-item.header .detail.Extension, .file-list-item.header .detail.Size { border-left: 1px solid #fff; } .file-list-item.header .detail.Selector { padding: 0; padding-top: 10px; } .file-list-item.header .detail.swappable { border-right: 1px solid #fff; } .file-list-item.header .detail.swappable:hover { border: 1px solid #777; } .file-list-item .select-all, .file-list-item .select-item { color: #333; } .file-list-item .select-all:hover, .file-list-item .select-item:hover { color: #6ba6f8; } .file-list-item .select-all:before, .file-list-item .select-item:before { content: "\E051"; font-size: 14px; line-height: 14px; vertical-align: middle; display: inline-block; } .file-list-item .go-to-parent-folder { visibility: hidden; } .file-list-item .go-to-parent-folder:before { content: "\E033"; font-size: 12px; line-height: 12px; vertical-align: middle; display: inline-block; } .file-list-item:hover .go-to-parent-folder { visibility: visible; } .file-list-item .select-item { opacity: 0.3; } .file-list-item .select-item:hover { opacity: 1; } .file-list-item.selected .select-item { opacity: 1; color: #3A89F6; } @media screen and (max-width: 1024px) { .file-list-item.header { height: auto !important; background: none !important; } .file-list-item.header .detail { line-height: normal !important; height: 28px; display: block; } .file-list-item.header .detail.Size { height: 18px; } .file-list-item.header .detail .sort { height: auto; } .file-list-item.header .detail .sort .column-name { font-weight: normal; color: #333; } .file-list-item.header:not(.sort-only) { display: none; } .file-list-item:not(.header) { display: block; line-height: normal; padding: 10px 0; } .file-list-item .detail { padding: 0 0 0 45px; font-size: 0.8em; } .file-list-item .Selector { display: none; } .file-list-item .FileName { position: static; width: auto; padding-right: 20px; line-height: 1.2em; display: block; font-size: 1.125em; } .file-list-item .GoToParent { padding: 0; right: 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%); } .file-list-item .GoToParent .go-to-parent-folder { visibility: visible; padding: 5px; } .file-list-item .sort { position: relative !important; } } .file-list-item .sort { position: absolute; width: 100%; height: 32px; top: 0; } .file-list-item .sort:hover span, .file-list-item .sort:active span { color: #050505; } .file-list-item .sort:hover.active:after, .file-list-item .sort:active.active:after { color: #333; } .file-list-item .sort.active .column-name { margin-right: 7px; display: inline-block; font-weight: bold; } .file-list-item .sort.active:after { content: "\E006"; font-size: 7px; line-height: 7px; vertical-align: middle; display: inline-block; color: #777; margin-bottom: 3px; -webkit-transform: rotate(270deg); -khtml-transform: rotate(270deg); -moz-transform: rotate(270deg); -ms-transform: rotate(270deg); -o-transform: rotate(270deg); transform: rotate(270deg); -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; } .file-list-item .sort.active.asc:after { -webkit-transform: rotate(90deg); -khtml-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } .file-list-item .sort-by { width: 50%; display: inline-block; } .file-list-item .sort-by:hover .toggle:after { color: #050505; } .file-list-item .sort-by .toggle { position: absolute; width: 100%; height: 32px; top: -20px; left: 119px; } .file-list-item .sort-by .toggle:after { content: "\E017"; font-size: 5px; line-height: 5px; vertical-align: middle; display: inline-block; color: #777; float: right; padding-right: 10px; } .file-list-item .sort-by .expanded-nav { top: 12px; left: 150px; } .file-list-item .sort-by .expanded-nav:before, .file-list-item .sort-by .expanded-nav:after { left: 129px; } .file-list-item .sort-by .expanded-nav .sort-by-header { font-weight: bold; border-bottom: 1px solid #EEE; padding-left: 20px; padding-bottom: 8px; margin-left: -14px; width: 123%; color: #333; } .file-list-item .sort-by .expanded-nav .sort-by-option { padding-top: 10px; display: inline-block; color: #333; cursor: pointer; } .file-list-item .sort-by .expanded-nav .sort-by-option input { margin-right: 10px; vertical-align: middle; } .file-list-item.sort-only { min-width: 200px; display: block; border: none; padding: 0; margin: 0; } .file-list-item.sort-only .detail { margin: 0; padding: 0; font-size: 1.4em; font-weight: normal; line-height: 1.8em; } .file-list-item.sort-only .detail.Selector { display: none !important; } .file-list-item.sort-only .detail span, .file-list-item.sort-only .detail button { display: none; } .file-list-item.sort-only .detail button.sort { display: block; width: 100%; } .file-list-item.sort-only .detail button.sort span { display: inline-block; } @charset "UTF-8"; .node-icon:not(.preview):before, .node-icon.folder:before, .node-icon.folder.protected:before, .node-icon.share:before, .node-icon.xls:before, .node-icon.pdf:before, .node-icon.markup:before, .node-icon.exe:before, .node-icon.mp3:before, .node-icon.ppt:before, .node-icon.txt:before, .node-icon.doc:before, .node-icon.zip: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-icon { position: relative; display: inline-block; min-width: 0; min-height: 0; width: 26px; height: 26px; line-height: 26px; text-align: center; } .node-icon.unpreviewable .icon:before { font-size: 20px; line-height: 26px; } .node-icon.unpreviewable .filename { display: none; } .node-icon:not(.preview):before { content: "\E026"; font-size: 20px; line-height: 20px; vertical-align: middle; display: inline-block; } .node-icon.folder:before { content: "\E025"; font-size: 20px; line-height: 20px; vertical-align: middle; display: inline-block; } .node-icon.folder.protected:before { content: "\E03E"; font-size: 20px; line-height: 20px; vertical-align: middle; display: inline-block; } .node-icon.share:before { content: "\E055"; font-size: 20px; line-height: 20px; vertical-align: middle; display: inline-block; } .node-icon.xls:before { content: "\E023"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; color: #009E49; } .node-icon.pdf:before { content: "\E029"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; color: #EE1000; } .node-icon.markup:before { content: "\E027"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .node-icon.exe:before { content: "\E024"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .node-icon.mp3:before { content: "\E028"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .node-icon.ppt:before { content: "\E02A"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; color: #DD5900; } .node-icon.txt:before { content: "\E02B"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; } .node-icon.doc:before { content: "\E02C"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; color: #4668C5; } .node-icon.zip:before { content: "\E02D"; font-size: 20px; line-height: 20px; 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) ------------------------------------------------------------- */ /* ------------------------------------------------------------- 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) ------------------------------------------------------------- */ .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"; /* ------------------------------------------------------------- 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) ------------------------------------------------------------- */ /* ------------------------------------------------------------- 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); */ .folder-picker .breadcrumbs li:not(.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) ------------------------------------------------------------- */ .folder-picker .create-new-folder 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; } .folder-picker .new-folder, .folder-picker .new-folder-cancel, .folder-picker .confirm { 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; } .folder-picker .new-folder:disabled, .folder-picker .new-folder-cancel:disabled, .folder-picker .confirm:disabled, .folder-picker .disabled.new-folder, .folder-picker .disabled.new-folder-cancel, .folder-picker .disabled.confirm { cursor: default; } .folder-picker .new-folder + a, .folder-picker .new-folder-cancel + a, .folder-picker .confirm + a, .folder-picker .new-folder + button, .folder-picker .new-folder-cancel + button, .folder-picker .confirm + button { margin-left: 15px; } .folder-picker .new-folder, .folder-picker .new-folder-cancel { background: none; color: inherit; } .folder-picker .new-folder:enabled:hover, .folder-picker .new-folder-cancel:enabled:hover, .folder-picker .new-folder:enabled:focus, .folder-picker .new-folder-cancel:enabled:focus, .folder-picker .new-folder:enabled:active, .folder-picker .new-folder-cancel:enabled:active, .folder-picker .new-folder:enabled.active, .folder-picker .new-folder-cancel:enabled.active { color: inherit; background: none; } .folder-picker .new-folder, .folder-picker .new-folder-cancel { border: 1px solid #EEE; } .folder-picker .confirm { background: #3A89F6; color: #fff; } .folder-picker .confirm:enabled:hover { background-color: #6ba6f8; color: #fff; } .folder-picker .confirm:enabled:active, .folder-picker .confirm:enabled.active, .folder-picker .confirm:enabled:focus { background-color: #5298f7; color: #fff; } .folder-picker .confirm:disabled, .folder-picker .disabled.confirm { background-color: #9cc3fa; color: #fff; } .folder-picker .new-folder, .folder-picker .new-folder-cancel { color: #333; } .folder-picker .new-folder:enabled:hover, .folder-picker .new-folder-cancel:enabled:hover { color: #6ba6f8; } .folder-picker { width: 500px; } .folder-picker .dialog-content { padding: 0; } .folder-picker .scroller { padding: 0 15px 15px 15px; } .folder-picker .breadcrumbs { height: 50px; line-height: 50px; border-bottom: 1px solid #EEE; } .folder-picker .breadcrumbs li:not(.overflow) { padding-right: 15px; padding-left: 0; } .folder-picker .breadcrumbs li:not(.overflow):before { content: "\E03A"; font-size: 10px; line-height: 10px; vertical-align: middle; display: inline-block; margin-right: 5px; } .folder-picker .breadcrumbs li:not(.overflow).active:before { display: none; } .folder-picker .breadcrumbs li { max-width: 100%; } .folder-picker .breadcrumbs .overflow { display: none; } .folder-picker .confirm { max-width: 50%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .folder-picker .create-new-folder { text-align: left; } .folder-picker .create-new-folder h3 { font-size: 1em; font-weight: bold; margin-bottom: 5px; } .folder-picker .create-new-folder input { margin: 5px 0; width: 100%; } .folder-picker .create-new-folder .actions { text-align: right; } .folder-picker .create-new-folder .error { float: left; color: #ff0000; text-align: left; margin: 10px 0; } .folder-picker .scroller { width: 100%; height: 500px; } .folder-picker .empty { text-align: center; width: 100%; margin-top: 150px; } .folder-picker .empty h2 { font-size: 2em; color: #999; } .folder-picker .file-list-item { cursor: pointer; } .infinite-scroll-list { position: relative; } .infinite-scroll-list .page { position: absolute; width: 100%; } .scroller { overflow-y: auto; overflow-x: hidden; } @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); */ .breadcrumbs > li:not(:first-child):before, .breadcrumbs .overflow .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) ------------------------------------------------------------- */ /* ------------------------------------------------------------- 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 **/ .breadcrumbs { height: 30px; line-height: 30px; font-size: 1.4em; position: relative; display: flex; } .breadcrumbs > li { flex-shrink: 1; vertical-align: top; max-width: 30%; color: #7985a3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .breadcrumbs > li a { color: inherit; } .breadcrumbs > li a:hover { color: #6ba6f8; } .breadcrumbs > li:not(:first-child):before { content: "\E04F"; font-size: 8px; line-height: 8px; vertical-align: middle; display: inline-block; margin: 0 5px; opacity: 0.75; } .breadcrumbs > li:last-child { flex-grow: 1; } .breadcrumbs > li.active { color: #333; } .breadcrumbs > li.count { vertical-align: bottom; color: #bbc1d0; padding-left: 10px; } .breadcrumbs > li.count:before { display: none; } .breadcrumbs .overflow { overflow: visible; width: 20px; position: absolute; left: 0; } .breadcrumbs .overflow .toggle { width: 20px; text-align: center; } .breadcrumbs .overflow .toggle:before { content: "\E041"; font-size: 12px; line-height: 12px; vertical-align: middle; display: inline-block; } .breadcrumbs .overflow + li { padding-left: 20px; } .breadcrumbs .expandable-nav { font-size: 1rem; line-height: inherit; vertical-align: middle; z-index: 100; } .breadcrumbs .expandable-nav .expanded-nav { top: calc(100% + 10px); } .breadcrumbs .expandable-nav a { max-width: 400px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media screen and (max-width: 700px) { .breadcrumbs .expandable-nav a { max-width: 200px; } } @charset "UTF-8"; .loading-transition.content-loading:before { 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-transition.content-loading:before { -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-transition.content-loading:before { -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 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 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 **/ /* ------------------------------------------------------------- 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) ------------------------------------------------------------- */ .loading-transition:before { opacity: 0; content: ''; -webkit-transition: opacity 333ms ease 150ms; -khtml-transition: opacity 333ms ease 150ms; -moz-transition: opacity 333ms ease 150ms; -ms-transition: opacity 333ms ease 150ms; -o-transition: opacity 333ms ease 150ms; transition: opacity 333ms ease 150ms; } .loading-transition.content-loading:before { opacity: 1; width: 50px; height: 50px; overflow: hidden; vertical-align: middle; display: inline-block; top: 50%; left: 50%; position: fixed; margin-left: 75px; margin-top: -25px; } @media screen and (max-width: 700px) { .loading-transition.content-loading:before { margin-left: -25px; } } .dialog .loading-transition { -webkit-transition: min-height 333ms ease; -khtml-transition: min-height 333ms ease; -moz-transition: min-height 333ms ease; -ms-transition: min-height 333ms ease; -o-transition: min-height 333ms ease; transition: min-height 333ms ease; min-height: 0; position: relative; } .dialog .loading-transition.content-loading { min-height: 250px; } .dialog .loading-transition.content-loading:before { margin-left: -25px; margin-top: -25px; } .empty-state { margin-top: 150px; text-align: center; } .empty-state h1, .empty-state h2 { color: #050505; font-weight: normal; } .empty-state h1 { margin-bottom: 10px; font-size: 1.5em; } .empty-state h2 { font-size: 0.9em; } @charset "UTF-8"; .user-menu .toggle:after, .user-menu .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) ------------------------------------------------------------- */ .user-menu .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; } .user-menu .toggle:disabled, .user-menu .disabled.toggle { cursor: default; } .user-menu .toggle + a, .user-menu .toggle + button { margin-left: 15px; } .user-menu .toggle { background: none; color: inherit; } .user-menu .toggle:enabled:hover, .user-menu .toggle:enabled:focus, .user-menu .toggle:enabled:active, .user-menu .toggle: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) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation 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 **/ .user-menu .toggle { color: #050505 !important; font-weight: normal; -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; } .user-menu .toggle:after { content: "\E017"; font-size: 5px; line-height: 5px; vertical-align: middle; display: inline-block; margin-left: 5px; } .user-menu .toggle:before { content: "\E053"; font-size: 20px; line-height: 20px; vertical-align: middle; display: inline-block; display: none; } .user-menu .toggle:hover { box-shadow: 0 0 10px rgba(5, 5, 5, 0.1); } .user-menu .toggle span { display: inline-block; vertical-align: middle; max-width: 350px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media screen and (max-width: 700px) { .user-menu .toggle { padding: 0 5px; } .user-menu .toggle:hover { box-shadow: none; } .user-menu .toggle span, .user-menu .toggle:after { display: none; } .user-menu .toggle:before { display: block; } } @media screen and (min-width: 701px) and (max-width: 1024px) { .user-menu .toggle { max-width: 150px; } } .user-menu .expanded-nav { text-align: right; } .user-menu .expanded-nav a, .user-menu .expanded-nav button { color: #333; } .user-menu .expanded-nav a:hover, .user-menu .expanded-nav button:hover { color: #6ba6f8; } @charset "UTF-8"; .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) ------------------------------------------------------------- */ /* ------------------------------------------------------------- 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 **/ /* ------------------------------------------------------------- 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; } @media screen and (max-width: 700px) { .dialog.feedback { width: 320px; } } .dialog.feedback .dialog-head:before { content: "\E052"; 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"; /* ------------------------------------------------------------- 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 **/ .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 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: #3A89F6; color: #fff; } .search-field button:enabled:hover { background-color: #6ba6f8; color: #fff; } .search-field button:enabled:active, .search-field button:enabled.active, .search-field button:enabled:focus { background-color: #5298f7; color: #fff; } .search-field button:disabled, .search-field button.disabled { background-color: #9cc3fa; color: #fff; } /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation 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) ------------------------------------------------------------- */ /* ------------------------------------------------------------- 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 **/ .search-field button { width: 35px; line-height: 35px; text-align: center; padding: 0; } .search-field button:before { content: "\E050"; font-size: 18px; line-height: 18px; vertical-align: middle; display: inline-block; } .search-field { display: block; width: 300px; } .search-field input, .search-field button { height: 35px; vertical-align: middle; display: inline-block; } .search-field input { padding: 5px 10px; width: calc(100% - 35px); display: inline-block; border: solid #EEE; border-width: 1px 0 1px 1px; border-radius: 3px 0 0 3px; } .search-field button { border-radius: 0 3px 3px 0; } @media screen and (max-width: 700px) { .search-field { width: 200px !important; } .search-field input { width: calc(100% - 35px); } } @charset "UTF-8"; #share-landing-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; } #share-landing-header .sign-in:disabled, #share-landing-header .disabled.sign-in { cursor: default; } #share-landing-header .sign-in + a, #share-landing-header .sign-in + button { margin-left: 15px; } #share-landing-header .sign-in { background: none; color: inherit; } #share-landing-header .sign-in:enabled:hover, #share-landing-header .sign-in:enabled:focus, #share-landing-header .sign-in:enabled:active, #share-landing-header .sign-in:enabled.active { color: inherit; background: none; } #share-landing-header .sign-in { 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 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 **/ #share-landing-header { position: fixed; top: 0; left: 0; right: 0; height: 55px; line-height: 55px; border-bottom: 1px solid #EEE; padding: 0 25px; display: flex; background-color: #fff; background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(rgba(255, 255, 255, 0.9))); background-image: -webkit-linear-gradient(top, #fff, rgba(255, 255, 255, 0.9)); background-image: -moz-linear-gradient(top, #fff, rgba(255, 255, 255, 0.9)); background-image: -ms-linear-gradient(top, #fff, rgba(255, 255, 255, 0.9)); background-image: -o-linear-gradient(top, #fff, rgba(255, 255, 255, 0.9)); background-image: linear-gradient(top, #fff, rgba(255, 255, 255, 0.9)); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fff', endColorStr='rgba(255, 255, 255, 0.9)'); background-color: transparent; z-index: 201; } @media screen and (max-width: 700px) { #share-landing-header { padding: 0 10px 0 20px; } } #share-landing-header .actions { flex-grow: 1; text-align: right; } #share-landing-header .files-logo { flex-shrink: 1; } #share-landing-header .files-logo svg { vertical-align: middle; display: inline-block; width: 150px; } #share-landing-header .sign-in { vertical-align: middle; } @media screen and (max-width: 700px) { #share-landing-header .sign-in { 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) ------------------------------------------------------------- */ .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: "\E010"; 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: "\E06D"; 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: "\E00D"; 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: "\E022"; 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"; /* ------------------------------------------------------------- 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); */ .app-intro-card .actions .next { 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; } .app-intro-card .actions .next:disabled, .app-intro-card .actions .disabled.next { cursor: default; } .app-intro-card .actions .next + a, .app-intro-card .actions .next + button { margin-left: 15px; } .app-intro-card .actions .next { background: #3A89F6; color: #fff; } .app-intro-card .actions .next:enabled:hover { background-color: #6ba6f8; color: #fff; } .app-intro-card .actions .next:enabled:active, .app-intro-card .actions .next:enabled.active, .app-intro-card .actions .next:enabled:focus { background-color: #5298f7; color: #fff; } .app-intro-card .actions .next:disabled, .app-intro-card .actions .disabled.next { background-color: #9cc3fa; color: #fff; } .app-intro-card { position: fixed; height: 1px; width: 1px; z-index: 300; } .full-screen .app-intro-card { display: none; } .app-intro-card .card-content { position: absolute; top: -40px; left: 40px; background: #fff; border-radius: 4px; border: 1px solid #3A89F6; box-shadow: 3px 3px 5px rgba(5, 5, 5, 0.1); padding: 15px; width: 350px; } .app-intro-card .card-content:before { 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-right: 7.5px solid #3A89F6; margin-left: -7.5px; content: ''; position: absolute; top: 32px; left: -8px; } .app-intro-card .card-content:after { border-left: 6.5px solid transparent; border-top: 6.5px solid transparent; border-bottom: 6.5px solid transparent; border-right: 6.5px solid transparent; border-right: 6.5px solid #fff; margin-left: -6.5px; content: ''; position: absolute; top: 33px; left: -7px; } .app-intro-card.card-2 .card-content { top: auto; bottom: -30px; } .app-intro-card.card-2 .card-content:before { top: auto; bottom: 22px; } .app-intro-card.card-2 .card-content:after { top: auto; bottom: 23px; } .app-intro-card .marker { 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%); margin: 0 5px; display: block; height: 20px; width: 20px; border-radius: 50%; box-shadow: 0 0 0 3px rgba(58, 137, 246, 0.5); } .app-intro-card .marker:before { content: ''; display: block; width: 14px; height: 14px; border-radius: 50%; background: #3A89F6; margin: 3px; } .app-intro-card p span { display: block; } .app-intro-card .count { position: absolute; top: 15px; right: 15px; color: #7985a3; } .app-intro-card .actions { text-align: right; } .app-intro-card .actions button { width: 50%; display: inline-block; text-align: center; } .app-intro-card h2 { font-weight: bold; font-size: 1.1em; color: #3A89F6; } .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; } @charset "UTF-8"; .name-file .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) ------------------------------------------------------------- */ .name-file 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; } .name-file input { font-size: 1.2em; width: 100%; } .name-file .error { display: block; text-align: left; margin: 15px 0 0 0; color: #ff0000; } .name-file .error:before { content: "\E01E"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; margin-right: 5px; } @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 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 **/ /* ------------------------------------------------------------- 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) ------------------------------------------------------------- */ .left-nav-layout { padding-top: 1px; } .left-nav-layout .body-content { margin: 54px 0 0 200px; padding: 25px; padding-bottom: 150px; } @media screen and (max-width: 700px) { .left-nav-layout .body-content { margin-left: 0; padding: 10px; } } .left-nav-layout .body-content > header { height: 30px; line-height: 30px; position: relative; top: -12.5px; } @media screen and (max-width: 700px) { .left-nav-layout .body-content > header { top: -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) ------------------------------------------------------------- */ /* ------------------------------------------------------------- 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 **/ .side-nav .files:before, .side-nav .recent:before, .side-nav .shared:before, .side-nav .trash:before, .side-nav .manage:before, .side-nav .manage.over-quota:before, .side-nav .photos:before, .side-nav .photos.prime-photos:before, .side-nav .photos.prime-photos: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) ------------------------------------------------------------- */ .side-nav { background: #EEE; width: 200px; padding: 20px; } .side-nav a { display: block; padding: 15px 0 15px 40px; color: #232323; font-size: 1.05em; position: relative; } .side-nav a:before { width: 25px; text-align: center; font-size: 1.3em !important; left: 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%); } .side-nav a:hover, .side-nav a.active { color: #3A89F6; } @media screen and (min-width: 701px) { .side-nav a.active { left: -20px; padding-left: 57px; background: #F6F7FD; border-left: 3px solid #3A89F6; width: calc(100% + 40px); } .side-nav a.active:before { left: 17px; } } .side-nav .files:before { content: "\E02F"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; } .side-nav .recent:before { content: "\E04A"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; } .side-nav .shared:before { content: "\E055"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; } .side-nav .trash:before { content: "\E013"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; } .side-nav .manage:before { content: "\E057"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; } .side-nav .manage.over-quota:before { content: "\E06C"; font-size: 25px; line-height: 25px; vertical-align: middle; display: inline-block; color: #f78595; } .side-nav .over-quota-warning { background: rgba(247, 133, 149, 0.25); border: 1px solid #f78595; color: #333 !important; font-size: 0.9em; padding: 10px; text-align: center; border-radius: 5px; } .side-nav .photos { padding-top: 20px; padding-bottom: 20px; border: solid #d5d5d5; border-width: 1px 0; } .side-nav .photos:before { content: "\E048"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; } .side-nav .photos.prime-photos:before { content: "\E047"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; } .side-nav .photos.prime-photos:after { content: "\E033"; font-size: 10px; line-height: 10px; vertical-align: middle; display: inline-block; color: #7985a3; margin-left: 10px; } @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) ------------------------------------------------------------- */ /* ------------------------------------------------------------- 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 **/ .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) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation 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) ------------------------------------------------------------- */ /* ------------------------------------------------------------- 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 **/ /* ------------------------------------------------------------- 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 **/ .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: fixed; top: 55px; bottom: 0; left: 0; padding: 0; width: 200px; background: #EEE; } .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: "\E041"; 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: "\E006"; 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 .content { display: flex; flex-direction: column; position: relative; height: 100%; } .side-nav-wrapper .upload-button { flex-shrink: 1; margin-top: 15px; padding: 0 20px; width: 100%; } .side-nav-wrapper .upload-button .toggle { width: 100%; } .side-nav-wrapper .upload-button .expandable-nav { width: 100%; } .side-nav-wrapper .upload-button .expanded-nav { left: 0; } @media screen and (max-width: 700px) { .side-nav-wrapper .upload-button { display: none; } } .side-nav-wrapper .inner { flex-grow: 1; overflow-x: hidden; overflow-y: auto; } @media screen and (max-width: 700px) { .side-nav-wrapper .inner { flex-grow: 0; } } .side-nav-wrapper .get-apps-promotion { flex-shrink: 1; padding: 0 20px 20px 20px; } @media screen and (max-width: 700px) { .side-nav-wrapper { position: fixed; top: 0; left: -200px; width: 200px; bottom: 0; background: #fff; 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; } .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; } .side-nav-wrapper .content { background: #fff; z-index: 300; } .side-nav-wrapper .side-nav { background: #fff; } .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; } .side-nav-wrapper .menu-expand-container { display: block; position: absolute; width: 20px; top: 7px; right: -20px; border-radius: 0 5px 5px 0; color: #7985a3; -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; } .side-nav-wrapper .menu-expand { display: block; height: 35px; width: 20px; } .side-nav-wrapper.open { left: 0; } .side-nav-wrapper.open, .side-nav-wrapper.dragging { box-shadow: 0 0 10px rgba(5, 5, 5, 0.4); } .side-nav-wrapper.open .menu-backdrop, .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; } .side-nav-wrapper.open div.menu-expand-container, .side-nav-wrapper.dragging div.menu-expand-container { background: #fff; color: #7985a3; box-shadow: 0 0 10px rgba(5, 5, 5, 0.4); } } @media screen and (max-width: 700px) { .select-mode .side-nav-wrapper .menu-expand-container { background: transparent; } } @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); */ .get-apps-promotion 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) ------------------------------------------------------------- */ /* ------------------------------------------------------------- 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 **/ .get-apps-promotion { position: relative; } .get-apps-promotion a { display: block; background: #fff; position: relative; text-align: center; font-size: 1em; line-height: 24px; border-radius: 4px; padding: 10px; padding-left: 50px; } .get-apps-promotion a:hover { color: #6ba6f8; } @media screen and (max-width: 700px) { .get-apps-promotion a { color: #6ba6f8; box-shadow: 0 0 0 1px #3A89F6; } } .get-apps-promotion a:before { content: "\E032"; font-size: 20px; line-height: 20px; vertical-align: middle; display: inline-block; left: 10px; color: #3A89F6; 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%); } @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 **/ /* ------------------------------------------------------------- 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) ------------------------------------------------------------- */ .selection-header .expandable-nav .toggle:before, .selection-header .select-cancel:before, .selection-header .trash:before, .selection-header .share:before, .selection-header .un-share:before, .selection-header .get-share-link:before, .selection-header .get-share-info:before, .selection-header .download:before, .selection-header .rename:before, .selection-header .move:before, .selection-header .delete:before, .selection-header .restore:before, .selection-header .selection-count: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 .select-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 .select-cancel:disabled, .selection-header .disabled.select-cancel { cursor: default; } .selection-header .select-cancel + a, .selection-header .select-cancel + button { margin-left: 15px; } .selection-header .select-cancel { color: #333 !important; background: rgba(255, 255, 255, 0.75) !important; border: 1px solid #cdd2db; font-weight: normal; } .selection-header .select-cancel:enabled:hover { color: #6ba6f8 !important; } /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation 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) ------------------------------------------------------------- */ /* ------------------------------------------------------------- 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 **/ .selection-header { position: fixed; top: 0; left: 0; right: 0; height: 55px; line-height: 55px; background: #CCE8FF; padding: 0 25px; color: #333; border-bottom: 2px solid #3A89F6; display: flex; z-index: 300; } @media screen and (max-width: 700px) { .selection-header { padding: 0 10px; } } .selection-header .columns { width: 100%; } .selection-header .columns .group-actions { text-align: right; flex-grow: 1; width: 0; white-space: nowrap; } .selection-header .columns .group-info { text-align: left; flex-shrink: 1; white-space: nowrap; } @media screen and (max-width: 700px) { .selection-header .columns .group-info { display: none; } } .selection-header .visible-actions button, .selection-header .expandable-nav .toggle, .selection-header .select-cancel { color: inherit; } .selection-header .visible-actions button:hover, .selection-header .expandable-nav .toggle:hover, .selection-header .select-cancel:hover { color: #6ba6f8; } .selection-header .expandable-nav .toggle:before { content: "\E041"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; } .selection-header .select-cancel:before { content: "\E06D"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; } .selection-header .select-cancel span { display: none; } @media screen and (min-width: 701px) { .selection-header .select-cancel:before { display: none; } .selection-header .select-cancel span { display: inline; } } .selection-header .visible-actions, .selection-header .visible-actions li { display: inline-block; } .selection-header .visible-actions li, .selection-header .visible-actions li li { display: inline-block; margin: 0 15px; } .selection-header .selection-options button span { margin-left: 5px; } @media screen and (max-width: 700px) { .selection-header .visible-actions button span { display: none; } } .selection-header .overflow .visible-actions button span { display: none; } .selection-header .trash:before { content: "\E013"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; } .selection-header .share:before { content: "\E055"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; } .selection-header .un-share:before { content: "\E05D"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; } .selection-header .get-share-link:before { content: "\E055"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; } .selection-header .get-share-info:before { content: "\E039"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; } .selection-header .download:before { content: "\E019"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; } .selection-header .rename:before { content: "\E04D"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; } .selection-header .move:before { content: "\E042"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; } .selection-header .delete:before { content: "\E013"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; } .selection-header .restore:before { content: "\E04E"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; } .selection-header .selection-count:before { content: "\E051"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; 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) ------------------------------------------------------------- */ .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; } @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: "\E055"; 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: "\E01D"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; } .share-dialog .share-options .share-box.facebook:before { content: "\E01F"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; } .share-dialog .share-options .share-box.twitter:before { content: "\E05A"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; } .share-dialog .share-options .share-box.link:before { content: "\E03C"; 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%; } @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 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: "\E058"; 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 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; } .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); */ .dialog.share-info { width: 400px; } .dialog.share-info .dialog-content { padding: 0; } .dialog.share-info .scroller { padding: 0 5px; max-height: 400px; } .dialog.share-info .count { display: block; border-bottom: 1px solid #EEE; line-height: 35px; font-size: 1.2em; font-weight: bold; text-align: center; } .dialog.share-info .loading-transition { min-height: 250px; } .dialog.share-info .empty-state { margin: 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%); } /* ------------------------------------------------------------- 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 **/ .share-dialog .share-file-list { text-align: left; border: none; max-height: 300px; overflow-y: auto; overflow-x: hidden; } .share-dialog .share-file-list li.file-list-item { border: none; } .share-dialog .share-file-list .extra { padding: 10px; font-weight: bold; } .share-dialog .share-file-list .extra:before { content: '+'; margin-right: 5px; } .share-dialog .share-options button { color: #7985a3; } .share-dialog .share-options button:hover { color: #6ba6f8; } .share-dialog footer { overflow: visible; } .share-dialog .email-client-select { display: flex; flex-wrap: wrap; } .share-dialog .email-client-select .selector-container { flex-shrink: 1; vertical-align: middle; } @media screen and (max-width: 700px) { .share-dialog .email-client-select .selector-container { width: 100%; margin-bottom: 15px; } .share-dialog .email-client-select .selector-container .fancy-selector { width: 100%; } } .share-dialog .email-client-select button.email-share { flex-grow: 1; width: auto; margin-left: 15px; vertical-align: middle; } @media screen and (max-width: 700px) { .share-dialog .email-client-select button.email-share { margin-left: 0; } } .share-dialog .email-client-select .expandable-nav .toggle { height: 35px; } .share-dialog .email-client-select .expandable-nav button { color: #7985a3; } .share-dialog .email-client-select .expandable-nav button:hover { color: #3d7eda; } @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: "\E00D"; 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"; /* ------------------------------------------------------------- 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 **/ .breadcrumb-actions .actions-overflow-menu .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) ------------------------------------------------------------- */ .breadcrumb-actions .visible-actions 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; } .breadcrumb-actions .visible-actions button:disabled, .breadcrumb-actions .visible-actions button.disabled { cursor: default; } .breadcrumb-actions .visible-actions button + a, .breadcrumb-actions .visible-actions button + button { margin-left: 15px; } .breadcrumb-actions .visible-actions button { background: none; color: inherit; } .breadcrumb-actions .visible-actions button:enabled:hover, .breadcrumb-actions .visible-actions button:enabled:focus, .breadcrumb-actions .visible-actions button:enabled:active, .breadcrumb-actions .visible-actions button:enabled.active { color: inherit; background: none; } .breadcrumb-actions .visible-actions button { border: 1px solid #EEE; } .breadcrumb-actions .visible-actions button { color: #333; } .breadcrumb-actions .visible-actions button:enabled:hover { color: #6ba6f8; } .breadcrumb-actions { display: flex; } .breadcrumb-actions .back-column, .breadcrumb-actions .action-column, .breadcrumb-actions .breadcrumb-column { height: inherit; line-height: inherit; vertical-align: middle; } .breadcrumb-actions .back-column { flex-shrink: 1; padding-right: 15px; } .breadcrumb-actions .action-column { flex-shrink: 1; padding-left: 15px; } .breadcrumb-actions .breadcrumb-column { flex-grow: 1; width: 0; } .breadcrumb-actions .visible-actions { white-space: nowrap; } @media screen and (max-width: 1024px) { .breadcrumb-actions .visible-actions { display: none; } } .breadcrumb-actions .visible-actions li { display: inline-block; } .breadcrumb-actions .visible-actions li + li { margin-left: 10px; } .breadcrumb-actions .visible-actions button { height: 34px; line-height: 34px; position: relative; top: -2px; box-shadow: 0 0 3px rgba(5, 5, 5, 0.1); } @media screen and (max-width: 700px) { .breadcrumb-actions .back-button span { display: none; } } .breadcrumb-actions .actions-overflow-menu { display: none; } .breadcrumb-actions .actions-overflow-menu a, .breadcrumb-actions .actions-overflow-menu button { color: #333; } .breadcrumb-actions .actions-overflow-menu .toggle { color: #333; } .breadcrumb-actions .actions-overflow-menu .toggle:before { content: "\E041"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; padding: 0 10px; } @media screen and (max-width: 1024px) { .breadcrumb-actions .actions-overflow-menu { display: inline-block; } } @charset "UTF-8"; .back-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) ------------------------------------------------------------- */ .back-button:before { content: "\E006"; font-size: 8px; line-height: 8px; vertical-align: middle; display: inline-block; } .back-button span { margin-left: 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) ------------------------------------------------------------- */ .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; } /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation 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) ------------------------------------------------------------- */ .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 .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 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 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 **/ .gallery .node.unpreviewable .actions .download, .gallery .node.unpreviewable .actions .openFolder { 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; } .gallery .node.unpreviewable .actions .download:disabled, .gallery .node.unpreviewable .actions .openFolder:disabled, .gallery .node.unpreviewable .actions .disabled.download, .gallery .node.unpreviewable .actions .disabled.openFolder { cursor: default; } .gallery .node.unpreviewable .actions .download + a, .gallery .node.unpreviewable .actions .openFolder + a, .gallery .node.unpreviewable .actions .download + button, .gallery .node.unpreviewable .actions .openFolder + button { margin-left: 15px; } .gallery .node.unpreviewable .actions .download, .gallery .node.unpreviewable .actions .openFolder { background: #3A89F6; color: #fff; } .gallery .node.unpreviewable .actions .download:enabled:hover, .gallery .node.unpreviewable .actions .openFolder:enabled:hover { background-color: #6ba6f8; color: #fff; } .gallery .node.unpreviewable .actions .download:enabled:active, .gallery .node.unpreviewable .actions .openFolder:enabled:active, .gallery .node.unpreviewable .actions .download:enabled.active, .gallery .node.unpreviewable .actions .openFolder:enabled.active, .gallery .node.unpreviewable .actions .download:enabled:focus, .gallery .node.unpreviewable .actions .openFolder:enabled:focus { background-color: #5298f7; color: #fff; } .gallery .node.unpreviewable .actions .download:disabled, .gallery .node.unpreviewable .actions .openFolder:disabled, .gallery .node.unpreviewable .actions .disabled.download, .gallery .node.unpreviewable .actions .disabled.openFolder { background-color: #9cc3fa; color: #fff; } .gallery { position: fixed; width: 100%; height: 100%; top: 0; left: 0; background-color: #050505; z-index: 299; } .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.unpreviewable { color: #8c8c8c; } .gallery .node.unpreviewable > 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%); text-align: center; } .gallery .node.unpreviewable > span .content, .gallery .node.unpreviewable > span .filename { display: block; } .gallery .node.unpreviewable > span .content { margin-bottom: 15px; } .gallery .node.unpreviewable > span .content .node-icon { height: initial; width: initial; line-height: initial; } .gallery .node.unpreviewable > span .content .node-icon:before { font-size: 50px; line-height: 50px; } .gallery .node.unpreviewable > span .filename { font-size: 2em; line-height: 1.2em; max-width: 300px; overflow: hidden; text-overflow: ellipsis; margin: 0 auto; } @media screen and (max-width: 700px) { .gallery .node.unpreviewable > span { width: calc(100% - 75px); } } .gallery .node.unpreviewable .actions { margin-top: 15px; text-align: center; } .gallery .node.unpreviewable .actions .download, .gallery .node.unpreviewable .actions .openFolder { vertical-align: middle; width: 9em; } @media screen and (max-width: 700px) { .gallery .node.unpreviewable .actions .download, .gallery .node.unpreviewable .actions .openFolder { display: block; margin: 1em 0 !important; width: 100%; } } .gallery .node.preloaded-node { top: 10000px; -webkit-transition: none; -khtml-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; } .gallery .node.doc-node.viewer-active object { width: calc(100% - 164px); height: calc(100% - 55px); position: absolute; top: 55px; left: 82px; right: 82px; } .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; } .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: "\E04F"; font-size: 15px; line-height: 15px; vertical-align: middle; display: inline-block; } @media screen and (max-width: 700px) { .gallery .next { right: 0; } } .gallery .prev { left: 25px; } .gallery .prev:before { content: "\E03A"; font-size: 15px; line-height: 15px; vertical-align: middle; display: inline-block; } @media screen and (max-width: 700px) { .gallery .prev { left: 0; } } .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: "\E006"; 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 .next, .gallery .prev, .gallery .node-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; } @media screen and (max-width: 700px) { .gallery .next, .gallery .prev, .gallery .node-head { pointer-events: none; } } .gallery.chrome-visible .next, .gallery.chrome-visible .prev, .gallery.chrome-visible .node-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; } @media screen and (max-width: 700px) { .gallery.chrome-visible .next, .gallery.chrome-visible .prev, .gallery.chrome-visible .node-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: "\E069"; 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: "\E069"; font-size: 14px; line-height: 14px; vertical-align: middle; display: inline-block; } .airy-pause:before { content: "\E068"; font-size: 13px; line-height: 13px; vertical-align: middle; display: inline-block; } .airy-on:before { content: "\E066"; font-size: 13px; line-height: 13px; vertical-align: middle; display: inline-block; padding-top: 2px; } .airy-off:before { content: "\E067"; font-size: 13px; line-height: 13px; vertical-align: middle; display: inline-block; padding-top: 2px; } .airy-fullscreen:before { content: "\E064"; font-size: 13px; line-height: 13px; vertical-align: middle; display: inline-block; line-height: 12px; } .airy-normalscreen:before { content: "\E065"; 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: "\E069"; 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: "\E04E"; 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) ------------------------------------------------------------- */ .doc-node:not(.unpreviewable) .viewDoc: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; } .doc-node:not(.unpreviewable) .viewDoc: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) ------------------------------------------------------------- */ .doc-node .viewDoc:before, .select-mode .doc-node:hover .viewDoc:before, .doc-node .exitViewDoc: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) ------------------------------------------------------------- */ .doc-node:not(.unpreviewable) .viewDoc: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; } .doc-node:not(.unpreviewable) .viewDoc: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); */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation 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) ------------------------------------------------------------- */ /* ------------------------------------------------------------- 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 **/ .doc-node .viewDoc, .select-mode .doc-node:hover .viewDoc { color: #fff; width: 50px; height: 50px; 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; } .doc-node .viewDoc:before, .select-mode .doc-node:hover .viewDoc:before { content: "\E050"; font-size: 24px; line-height: 24px; 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%); } .doc-node .exitViewDoc { position: absolute; top: 60px; left: 25px; color: #fff; } .doc-node .exitViewDoc:before { content: "\E06D"; font-size: 15px; line-height: 15px; vertical-align: middle; display: inline-block; } .doc-node .viewer-not-supported { height: 100%; width: 100%; position: absolute; top: 0; left: 0; background: #050505; } .doc-node .viewer-not-supported 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%); } .doc-node:not(.unpreviewable) .viewDoc { background: #232f40; background: rgba(35, 47, 64, 0.5); } .doc-node:not(.unpreviewable) .viewDoc: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); } .doc-node.pdf-unviewable .unpreviewable h3 { max-width: 400px; } @media screen and (max-width: 700px) { .doc-node.pdf-unviewable .unpreviewable h3 { font-size: 1.6em; } } .doc-node.image-error .duration { color: #a6aec0; text-shadow: none; } .doc-node.image-loading:before { display: none; } .doc-node object { z-index: 1; } .doc-node .loading { position: absolute; z-index: 0; } @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) ------------------------------------------------------------- */ .node-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) ------------------------------------------------------------- */ /** * @license ********** BEGIN LICENSE ********** http://mynameismatthieu.com/sass-css3-mixins/ Copyright © 2013 Matthieu Aussaguel This file is used under the MIT license. */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-horizontal - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - Default arguments: What: all, Length: 1s, Easing: ease-in-out - - Examples: @include transition (all 2s ease-in-out); - @include transition (opacity 1s ease-in 2s, width 2s ease-out); - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation 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) ------------------------------------------------------------- */ /* ------------------------------------------------------------- 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 **/ .node-head { display: flex; height: 55px; line-height: 55px; position: fixed; text-align: right; top: 0; left: 0; right: 0; padding: 0 25px; 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; } @media screen and (max-width: 700px) { .node-head { padding: 0 10px; } } .node-head .back, .node-head .visible-options li a, .node-head .visible-options li button { color: #fff; text-shadow: 0px 1px 5px rgba(5, 5, 5, 0.5); } .node-head .back:hover, .node-head .visible-options li a:hover, .node-head .visible-options li button:hover { opacity: 0.5; } .node-head .back { flex-shrink: 1; letter-spacing: 0.4px; } .node-head .back:before { content: "\E006"; font-size: 10px; line-height: 10px; vertical-align: middle; display: inline-block; vertical-align: middle; margin-right: 5px; } .node-head .visible-options { flex-grow: 1; } .node-head .visible-options li { display: inline-block; margin-left: 30px; } @media screen and (max-width: 1024px) { .node-head .visible-options li a span, .node-head .visible-options li button span { display: none; } } @charset "UTF-8"; .node-options > li .trash:before, .node-options > li .share:before, .node-options > li .download:before, .node-options > li .move:before, .node-options > li .delete:before, .node-options > li .reportAbuse:before, .node-options > li .bill-vendor-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 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 **/ .node-options > li { font-size: 1em; } .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; } .node-options > li .trash:before { content: "\E013"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; } .node-options > li .share:before { content: "\E055"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; } .node-options > li .download:before { content: "\E019"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; } .node-options > li .move:before { content: "\E060"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; } .node-options > li .delete:before { content: "\E013"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; } .node-options > li .reportAbuse:before { content: "\E030"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; } .node-options > li .bill-vendor-link.bill-vendor-link:before { content: "\E007"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; } body.desktop .node-options > li .bill-vendor-link.bill-vendor-link { border: 1px solid #fff; border-radius: 4px; display: inline-block; line-height: 2.5em; padding: 0 15px; } @charset "UTF-8"; .report-abuse-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) ------------------------------------------------------------- */ .report-abuse-dialog input, .report-abuse-dialog 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-dialog select { border: 1px solid #EEE; background: #fff; border-radius: 5px; display: inline-block; height: 2em; } .report-abuse-dialog { max-width: 500px; } .report-abuse-dialog .dialog-head:before { content: "\E030"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; } .report-abuse-dialog p { clear: both; } .report-abuse-dialog label, .report-abuse-dialog input, .report-abuse-dialog textarea, .report-abuse-dialog select { float: left; margin: 15px 0; } .report-abuse-dialog input, .report-abuse-dialog textarea { width: calc(100% - 135px); } .report-abuse-dialog input.invalid, .report-abuse-dialog textarea.invalid { color: #ff0000; } .report-abuse-dialog select { width: calc(100% - 135px); } .report-abuse-dialog label { clear: both; font-size: 0.9em; width: 135px; } .report-abuse-dialog a.button { vertical-align: bottom; } .bucket-list-layout h3 { font-size: 0.9em; padding: 10px; margin: 0; color: #050505; text-transform: uppercase; background: #EEE; font-weight: normal; } /* ------------------------------------------------------------- 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 (max-width: 1024px) { .file-list-item.recent-list-item .DateCreated { display: none; } .file-list-item.recent-list-item .DateModified { display: inline; } } /* ------------------------------------------------------------- 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 **/ #search-page .breadcrumbs li { max-width: 100%; } .search-empty-state { text-align: center; margin-top: 150px; } .search-empty-state svg { max-width: 150px; margin-bottom: 15px; } .search-empty-state h2 { margin-bottom: 5px; font-size: 1.2em; font-weight: bold; } .search-empty-state h3 { 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) ------------------------------------------------------------- */ /* ------------------------------------------------------------- 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); */ #trash-page .auto-purge-notice: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) ------------------------------------------------------------- */ #trash-page .auto-purge-notice { position: relative; background: #F6F7FD; border: solid #EEE; border-width: 1px 0 0 0; padding: 15px; padding-left: 50px; } #trash-page .auto-purge-notice:before { content: "\E039"; font-size: 20px; line-height: 20px; vertical-align: middle; display: inline-block; left: 15px; opacity: 0.75; 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%); } @media screen and (max-width: 1024px) { #trash-page .auto-purge-notice { border-width: 1px; border-radius: 3px; } } /* ------------------------------------------------------------- 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 (max-width: 1024px) { .file-list-item.trash-list-item .DateModified { display: inline; } } @charset "UTF-8"; #share-landing-page .report-abuse: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-page .report-abuse:before { content: "\E030"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; } #share-landing-page .report-abuse span { margin-left: 10px; } #share-landing-page .share-notice { position: fixed; bottom: 0; left: 0; right: 0; background: rgba(255, 255, 255, 0.95); padding: 15px; text-align: center; border-top: 1px solid #EEE; box-shadow: -5px 0 10px rgba(5, 5, 5, 0.1); } #share-landing-page .infinite-scroll-list { margin-bottom: 100px; } #share-landing-page .selection-header button.download span { display: inline-block !important; } @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 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 **/ /* ------------------------------------------------------------- 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) ------------------------------------------------------------- */ .no-nav-layout { padding-top: 1px; } .no-nav-layout .body-content { margin: 54px 0 0 0; padding: 25px; } @media screen and (max-width: 700px) { .no-nav-layout .body-content { padding: 10px; } } .no-nav-layout .body-content > header { height: 30px; line-height: 30px; position: relative; top: -12.5px; } @media screen and (max-width: 700px) { .no-nav-layout .body-content > header { top: -5px; } } @charset "UTF-8"; .empty-state.share-missing h1: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.share-missing h1 { font-size: 1.8em; } .empty-state.share-missing h1:before { content: "\E039"; font-size: inherit; line-height: inherit; vertical-align: middle; display: inline-block; color: #ff0000; margin-right: 15px; } .empty-state.share-missing h2 { font-size: 1.2em; }