mirror of
https://github.com/silverstripe/silverstripe-framework
synced 2024-08-26 12:36:07 +02:00
328 lines
8.2 KiB
SCSS
328 lines
8.2 KiB
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;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|