mirror of
https://github.com/silverstripe/silverstripe-framework
synced 2024-10-04 07:08:34 +02:00
74454a7557
Panel adjustments to south and site tree collapsed so that everything aligns. Start of bootstrap tab styles Fix for pages batch action alignment issue
498 lines
8.0 KiB
SCSS
498 lines
8.0 KiB
SCSS
/**
|
|
* Styles for the left hand side menu and header for the admin panels.
|
|
*
|
|
* Take into consideration CSS selector performance.
|
|
*
|
|
* @package framework
|
|
* @subpackage admin
|
|
*/
|
|
|
|
.cms-logo-header {
|
|
position: relative !important;
|
|
top:auto !important;
|
|
height:auto !important;
|
|
padding: 0;
|
|
line-height: 24px;
|
|
background-color: $color-brand-bg;
|
|
|
|
span {
|
|
color: $color-text-light;
|
|
display: block;
|
|
padding-left:26px;
|
|
|
|
a {
|
|
color: white;
|
|
display: inline;
|
|
}
|
|
}
|
|
}
|
|
|
|
.cms-logo {
|
|
box-shadow: inset 0 -1px darken($color-brand-bg, 4%);
|
|
overflow: hidden;
|
|
padding: $grid-y*1.5 8px;
|
|
position: relative;
|
|
vertical-align: middle;
|
|
transition: padding .2s;
|
|
min-height: 52px;
|
|
transition: padding .2s;
|
|
|
|
.version {
|
|
display: none;
|
|
}
|
|
|
|
a {
|
|
position: absolute;
|
|
top: $grid-y;
|
|
bottom: $grid-y;
|
|
display: block;
|
|
width: 24px;
|
|
background: $application-logo-small no-repeat center center;
|
|
text-indent: -9999em;
|
|
padding: 0 1px;
|
|
}
|
|
|
|
span {
|
|
font-weight: bold;
|
|
line-height: 16px;
|
|
padding: 6px 0;
|
|
margin-left: 32px;
|
|
}
|
|
}
|
|
|
|
.cms-login-status {
|
|
padding: $grid-y*1.5 8px;
|
|
line-height: 16px;
|
|
font-size: $font-size-sm;
|
|
min-height: 28px;
|
|
transition: padding .2s;
|
|
|
|
.logout-link {
|
|
float: left;
|
|
font-size: 16px;
|
|
height: 28px;
|
|
padding: 6px 8px 6px 5px;
|
|
opacity: .9;
|
|
color: #fff;
|
|
|
|
&:hover, &:focus{
|
|
opacity: 1;
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
span {
|
|
padding: 6px 0 6px 26px;
|
|
}
|
|
}
|
|
|
|
.cms-menu {
|
|
z-index: 80;
|
|
background: $color-theme-bg;
|
|
width: ($grid-x * 20);
|
|
|
|
.cms-menu-list {
|
|
margin: $grid-y * 1.5 0 0 0;
|
|
list-style-type: none;
|
|
padding-left: 0;
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.cms-panel-content {
|
|
width: ($grid-x * 20);
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
position: relative !important;
|
|
top:auto !important;
|
|
left:auto !important;
|
|
box-shadow: inset #C1C7CC -1px 0 0;
|
|
min-height: calc(100% - 104px);
|
|
}
|
|
|
|
&.collapsed {
|
|
width: ($grid-x * 7.5) !important; // Using important because JavaScript is overriding this value
|
|
cursor: auto;
|
|
z-index: 1000;
|
|
|
|
.cms-panel-header {
|
|
width: 30px;
|
|
|
|
span {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.cms-menu-list {
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
|
|
li {
|
|
width: 100%;
|
|
float: left;
|
|
|
|
ul {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
span.text {
|
|
display: none;
|
|
}
|
|
|
|
.cms-login-status,
|
|
.cms-logo {
|
|
height: 52px;
|
|
padding: 12px 18px 11px;
|
|
|
|
span {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
&.cms-panel .cms-panel-content {
|
|
display: block; // override panel defaults
|
|
}
|
|
|
|
.ss-ui-button.sticky-toggle {
|
|
width: 50%;
|
|
}
|
|
|
|
.cms-menu-list li a {
|
|
padding-left: 18px;
|
|
padding-right: 18px;
|
|
}
|
|
|
|
.ss-ui-button.sticky-toggle {
|
|
background-position: 12px center;
|
|
}
|
|
}
|
|
|
|
.cms-panel-toggle {
|
|
height: 53px;
|
|
|
|
a,
|
|
a.toggle-expand {
|
|
float: right;
|
|
width: 50%;
|
|
padding-top: 13px;
|
|
padding-bottom: 13px;
|
|
}
|
|
}
|
|
|
|
.ss-ui-button.sticky-toggle {
|
|
float: left;
|
|
width: 52px;
|
|
height: 52px;
|
|
margin: 0;
|
|
padding: $grid-x;
|
|
text-indent: -999em;
|
|
background-color: transparent;
|
|
background-image: url(../images/sticky-toggle-off.png);
|
|
background-repeat: no-repeat;
|
|
background-position: 16px center;
|
|
border: 0;
|
|
transition: position .2s;
|
|
|
|
&:hover {
|
|
box-shadow: 0 0 0;
|
|
}
|
|
|
|
&.active {
|
|
background-image: url(../images/sticky-toggle-on.png);
|
|
}
|
|
|
|
.ui-button-text {
|
|
padding: 0;
|
|
}
|
|
|
|
// When the button is hovered, show the status indicator
|
|
&:hover {
|
|
+ .sticky-status-indicator {
|
|
display: block;
|
|
padding: 3px 3px 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.sticky-status-indicator {
|
|
display: none;
|
|
position: absolute;
|
|
top: -22px;
|
|
left: 2px;
|
|
font-size: 9px;
|
|
color: #555d60;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
// Sub menu (will also be available for profile)
|
|
.toggle-children {
|
|
display: inline-block;
|
|
float: right;
|
|
width: 20px;
|
|
height: 100%;
|
|
cursor: pointer;
|
|
padding-top: 17px;
|
|
}
|
|
|
|
.child-flyout-indicator,
|
|
.toggle-children-icon {
|
|
background-image: none;
|
|
border-color: darken(#ccdce6, 25%);
|
|
border-style: solid;
|
|
border-width: 0 1px 1px 0;
|
|
width: 8px;
|
|
height: 8px;
|
|
position: absolute;
|
|
margin-top: 3px;
|
|
right: 8px;
|
|
z-index: 2;
|
|
-ms-transform: rotate(-45deg); /* IE 9 */
|
|
-webkit-transform: rotate(-45deg); /* Chrome, Safari, Opera */
|
|
transform: rotate(-45deg);
|
|
// display: none; /* To be shown by javascript, see LeftAndMain.Panel.js */
|
|
}
|
|
|
|
.opened .toggle-children-icon {
|
|
margin-top: 1px;
|
|
}
|
|
|
|
&.collapsed .child-flyout-indicator {
|
|
margin-top: -29px;
|
|
}
|
|
}
|
|
|
|
.cms-menu-list {
|
|
|
|
a:focus,
|
|
a:active {
|
|
text-decoration: none;
|
|
}
|
|
|
|
li {
|
|
line-height: 18px; /* new v4 global line-height */
|
|
|
|
a {
|
|
display: block;
|
|
line-height: $grid-y * 2;
|
|
min-height: 50px;
|
|
color: $color-text-default;
|
|
padding: (2 * $grid-y + 1) 5px (2 * $grid-y + 1) 8px;
|
|
background-color: $base-menu-bg;
|
|
cursor: pointer;
|
|
position: relative;
|
|
transition: padding .2s;
|
|
text-decoration: none;
|
|
box-shadow: inset $color-separator -1px 0 0;
|
|
|
|
&:hover {
|
|
text-decoration: none;
|
|
background-color: $base-menu;
|
|
color: darken($color-text-dark, 5%);
|
|
}
|
|
|
|
&:focus,
|
|
&:active {
|
|
background-color: $base-menu;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.icon {
|
|
display: block;
|
|
position: absolute;
|
|
top: 50%;
|
|
margin-left: $grid-x / 2;
|
|
margin-top: -8px;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.text {
|
|
display: block;
|
|
margin-left: 30px;
|
|
}
|
|
|
|
span.toggle-children {
|
|
top: 0;
|
|
}
|
|
}
|
|
|
|
.icon {
|
|
display: block;
|
|
position: absolute;
|
|
top: 50%;
|
|
margin-left: $grid-x / 2;
|
|
margin-top: -8px;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
&.current { //need to apply current stlye to flyout also (at least line height)
|
|
|
|
&>a {
|
|
background-color: $base-menu;
|
|
|
|
.toggle-children {
|
|
.toggle-children-icon {
|
|
@extend .icon-sprites-32x32;
|
|
@include sprite($sprites-32x32-menu-arrow-down);
|
|
}
|
|
}
|
|
}
|
|
|
|
a {
|
|
background-color: $base-menu;
|
|
}
|
|
|
|
ul {
|
|
border-top: none;
|
|
display: block;
|
|
}
|
|
|
|
li {
|
|
background-color: $base-menu-bg;
|
|
|
|
a {
|
|
&.current,
|
|
&:hover {
|
|
background-color: $base-menu;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
|
|
// Has sub menu
|
|
&.children {
|
|
|
|
.no-icon.text {
|
|
margin-left: 30px;
|
|
}
|
|
|
|
// Sub menu
|
|
ul li a {
|
|
font-size: 12px;
|
|
line-height: 18px;
|
|
height: 18px;
|
|
padding-top: 11px;
|
|
padding-bottom: 11px;
|
|
color: lighten($color-text-default, 10%);
|
|
background-color: $base-menu-bg;
|
|
|
|
span.text {
|
|
margin-left: 23px;
|
|
}
|
|
}
|
|
|
|
&.current {
|
|
> a {
|
|
background-color: transparent;
|
|
&:hover {
|
|
background-color: lighten($base-menu, 3%);
|
|
}
|
|
}
|
|
}
|
|
|
|
&.opened {
|
|
a:hover {
|
|
background-color: lighten($base-menu, 3%);
|
|
}
|
|
.current a {
|
|
background-color: $base-menu;
|
|
}
|
|
.opened .toggle-children-icon {
|
|
transform: rotate(45deg);
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Style applied to the menu flyout only when the collapsed setting */
|
|
.collapsed-flyout {
|
|
left: 59px;
|
|
margin-top: -52px;
|
|
position: fixed;
|
|
width: 160px;
|
|
z-index: 1;
|
|
display: none;
|
|
|
|
.icon {
|
|
display: none;
|
|
}
|
|
|
|
li {
|
|
a {
|
|
background: $base-menu-bg;
|
|
box-shadow: none;
|
|
padding: 10px 0;
|
|
height: 40px;
|
|
line-height: 18px;
|
|
|
|
&:hover,
|
|
&:active {
|
|
background: lighten($base-menu, 3%);
|
|
}
|
|
}
|
|
|
|
&.children a {
|
|
font-size: 13px;
|
|
height: 18px;
|
|
cursor: default;
|
|
}
|
|
|
|
&.current {
|
|
a {
|
|
background-color: $base-menu;
|
|
}
|
|
&.children a {
|
|
background-color: $base-menu-bg;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.collapsed {
|
|
|
|
.toggle-children {
|
|
display: none;
|
|
}
|
|
|
|
.opened {
|
|
ul.collapsed-flyout {
|
|
border-radius: 0px 2px 2px 0px ;
|
|
border: 1px solid #d2d5d8;
|
|
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
|
|
|
|
li {
|
|
&.clone {
|
|
a {
|
|
padding: 15px 0 15px 70px;
|
|
margin-left: -60px;
|
|
margin-right: 0px;
|
|
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
|
|
|
|
span.text {
|
|
margin-left: -10px;
|
|
}
|
|
}
|
|
}
|
|
|
|
a span.text {
|
|
display: block;
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.child-flyout-indicator {
|
|
position: fixed;
|
|
left: 196px;
|
|
transform: rotate(45deg);
|
|
margin-top: -33px;
|
|
}
|
|
}
|
|
}
|
|
}
|