silverstripe-framework/admin/scss/_retina.scss

/**
 * This file defines graphics to use on high-DPI screens in the CMS
 *
 * @package framework
 * @subpackage admin
 */

@mixin retina-sprite($sprite) {
	@include sprite($sprite);
	background-position: round(nth($sprite, 1)/2) round(nth($sprite, 2)/2);
	width: round(nth($sprite, 3)/2);
	height: round(nth($sprite, 4)/2);
}

@mixin icons-retina($sprite) {
	background-image: sprite-url($sprite);
	background-size: ceil(image-width(sprite-path($sprite)) / 2) auto;

	&.icon-assetadmin {
		background-position: 0 round(nth(sprite-position($sprite, "picture"), 2) / 2);
	}
	&.icon-cmsmain {
		background-position: 0 round(nth(sprite-position($sprite, "pencil"), 2) / 2);
	}
	&.icon-cmspagescontroller {
		background-position: 0 round(nth(sprite-position($sprite, "network"), 2) / 2);
	}
	&.icon-cmssettingscontroller {
		background-position: 0 round(nth(sprite-position($sprite, "gears"), 2) / 2);
	}
	&.icon-securityadmin {
		background-position: 0 round(nth(sprite-position($sprite, "community"), 2) / 2);
	}
	&.icon-reportadmin {
		background-position: 0 round(nth(sprite-position($sprite, "pie-chart"), 2) / 2);
	}
	&.icon-commentadmin {
		background-position: 0 round(nth(sprite-position($sprite, "blog"), 2) / 2);
	}
	&.icon-help {
		background-position: 0 round(nth(sprite-position($sprite, "information"), 2) / 2);
	}
}

/** ----------------------------------------------------
 * "@2x" media query
 * ---------------------------------------------------- */

@media
	only screen and (-webkit-min-device-pixel-ratio: 2),
	only screen and (   min--moz-device-pixel-ratio: 2),
	only screen and (     -o-min-device-pixel-ratio: 2/1),
	only screen and (        min-device-pixel-ratio: 2),
	only screen and (                min-resolution: 192dpi),
	only screen and (                min-resolution: 2dppx) {

	.retina-sprites-64x64-2x {
		background-image: url('../images/sprites/dist/sprite-sprites-64x64-2x.png');
		background-size: 40px auto;
	}

	.retina-sprites-32x32-2x {
		background-image: url('../images/sprites/dist/sprite-sprites-32x32-2x.png');
		background-size: 30px auto;
	}

	.retina-menu-icons-24x24-2x {
		background-image: url('../images/sprites/dist/sprite-menu-icons-24x24-2x.png');
		background-size: 16px auto;
	}

	.retina-menu-icons-16x16-2x {
		background-image: url('../images/sprites/dist/sprite-menu-icons-16x16-2x.png');
		background-size: 16px auto;
	}

	/* Loading spinner */
	.cms-content-loading-spinner {
		background-image: url(../images/spinner@2x.gif);
		background-size: 43px 43px;
	}

	.ui-dialog {
		.ui-dialog-content {
			&.loading {
				background-image: url(../images/spinner@2x.gif);
				background-size: 43px 43px;
			}
		}

		&.loading {
			background-image: url(../images/spinner@2x.gif);
			background-size: 43px 43px;
		}
	}

	/* Default CMS logo */
	.cms-logo {
		a {
			background-image: $application-logo-small-2x;
			background-size: 22px 22px;
		}
	}

	.cms-content-controls {
		.icon-auto:before {
			@extend .retina-sprites-32x32-2x;
			@include retina-sprite($sprites-32x32-2x-preview_auto);
		}
		.icon-desktop:before {
			@extend .retina-sprites-32x32-2x;
			@include retina-sprite($sprites-32x32-2x-preview_desktop);
		}
		.icon-tablet:before {
			@extend .retina-sprites-32x32-2x;
			@include retina-sprite($sprites-32x32-2x-preview_tablet);
		}
		.icon-mobile:before {
			@extend .retina-sprites-32x32-2x;
			@include retina-sprite($sprites-32x32-2x-preview_mobile);
		}
		.icon-split:before {
			@extend .retina-sprites-32x32-2x;
			@include retina-sprite($sprites-32x32-2x-preview_split);
		}
		.icon-edit:before {
			@extend .retina-sprites-32x32-2x;
			@include retina-sprite($sprites-32x32-2x-preview_edit);
		}
		.icon-preview:before {
			@extend .retina-sprites-32x32-2x;
			@include retina-sprite($sprites-32x32-2x-preview_preview);
		}
	}

	.cms {
		.ss-ui-action-tabset {
			&.action-menus.ss-tabset {
				ul.ui-tabs-nav {
					li {
						a {
							&:after {
								@extend .retina-sprites-32x32-2x;
								@include retina-sprite($sprites-32x32-2x-arrow_down_lighter);
								display: inline-block;
							}

							&:hover:after {
								@extend .retina-sprites-32x32-2x;
								@include retina-sprite($sprites-32x32-2x-arrow_down_darker);
								display: inline-block;
							}
						}

						&.ui-state-active a {
							&:after {
								@extend .retina-sprites-32x32-2x;
								@include retina-sprite($sprites-32x32-2x-arrow_up_lighter);
								display: inline-block;
							}

							&:hover:after {
								@extend .retina-sprites-32x32-2x;
								@include retina-sprite($sprites-32x32-2x-arrow_up_darker);
								display: inline-block;
							}
						}
					}
				}
			}
		}
	}

	/* CMS menu */
	.cms-menu-list {
		li {
			a {
				.toggle-children {
					.toggle-children-icon {
						@extend .retina-sprites-32x32-2x;
						@include retina-sprite($sprites-32x32-2x-menu-arrow-deselected-down);
					}

					&.opened {
						.toggle-children-icon {
							@extend .retina-sprites-32x32-2x;
							@include retina-sprite($sprites-32x32-2x-menu-arrow-deselected-up);
						}
					}
				}
			}

			&.current {
				a {
					.toggle-children {
						.toggle-children-icon {
							@extend .retina-sprites-32x32-2x;
							@include retina-sprite($sprites-32x32-2x-menu-arrow-down);
						}

						&.opened {
							.toggle-children-icon {
								@extend .retina-sprites-32x32-2x;
								@include retina-sprite($sprites-32x32-2x-menu-arrow-up);
							}
						}
					}
				}
			}
		}
	}

	/* Sitetree */
	.tree-holder, .cms-tree {
		&.jstree-apple {
			ins {
				background-image: url(../images/sitetree_ss_default_icons@2x.png);
				background-size: 108px 72px;
			}
		}
	}

	/* UI widget "close" button */
	.ui-widget-header {
		a.ui-state-hover {
			.ui-icon-closethick {
				@extend .retina-sprites-32x32-2x;
				@include retina-sprite($sprites-32x32-2x-dialog-close-over);
			}
		}

		.ui-icon-closethick {
			@extend .retina-sprites-32x32-2x;
			@include retina-sprite($sprites-32x32-2x-dialog-close);
		}
	}

	/* Menu icon classes */
	// .icon {
	// 	&.icon-24 {
	// 		@include icons-retina($icon24-2x);
	// 	}
	// 
	// 	&.icon-16 {
	// 		@include icons-retina($icon16-2x);
	// 	}
	// }
	
	.icon {
		&.icon-24 {
	        @extend .retina-menu-icons-24x24-2x;

	        &.icon-assetadmin {
	    		@include retina-sprite($menu-icons-24x24-2x-picture);
				display: inline-block;
	    	}
	    	&.icon-cmsmain {
	    		@include retina-sprite($menu-icons-24x24-2x-pencil);
				display: inline-block;
	    	}
	    	&.icon-cmspagescontroller {
	    		@include retina-sprite($menu-icons-24x24-2x-network);
				display: inline-block;
	    	}
	    	&.icon-cmssettingscontroller {
	    		@include retina-sprite($menu-icons-24x24-2x-gears);
				display: inline-block;
	    	}
	    	&.icon-securityadmin {
	    		@include retina-sprite($menu-icons-24x24-2x-community);
				display: inline-block;
	    	}
	    	&.icon-reportadmin {
	    		@include retina-sprite($menu-icons-24x24-2x-pie-chart);
				display: inline-block;
	    	}
	    	&.icon-commentadmin {
	    		@include retina-sprite($menu-icons-24x24-2x-blog);
				display: inline-block;
	    	}
	    	&.icon-help {
	    		@include retina-sprite($menu-icons-24x24-2x-information);
				display: inline-block;
	    	}
		}

		&.icon-16 {
			width: 16px;
			height: 16px;
	        @extend .retina-menu-icons-16x16-2x;

	        &.icon-assetadmin {
	    		@include retina-sprite($menu-icons-16x16-2x-picture);
				display: inline-block;
	    	}
	    	&.icon-cmsmain {
	    		@include retina-sprite($menu-icons-16x16-2x-pencil);
				display: inline-block;
	    	}
	    	&.icon-cmspagescontroller {
	    		@include retina-sprite($menu-icons-16x16-2x-network);
				display: inline-block;
	    	}
	    	&.icon-cmssettingscontroller {
	    		@include retina-sprite($menu-icons-16x16-2x-gears);
				display: inline-block;
	    	}
	    	&.icon-securityadmin {
	    		@include retina-sprite($menu-icons-16x16-2x-community);
				display: inline-block;
	    	}
	    	&.icon-reportadmin {
	    		@include retina-sprite($menu-icons-16x16-2x-pie-chart);
				display: inline-block;
	    	}
	    	&.icon-commentadmin {
	    		@include retina-sprite($menu-icons-16x16-2x-blog);
				display: inline-block;
	    	}
	    	&.icon-help {
	    		@include retina-sprite($menu-icons-16x16-2x-information);
				display: inline-block;
	    	}
		}
	}

}