mirror of
https://github.com/silverstripe/silverstripe-framework
synced 2024-09-09 03:01:18 +02:00
3ee8f505b7
The main benefit of this is so that authors who make use of
.editorconfig don't end up with whitespace changes in their PRs.
Spaces vs. tabs has been left alone, although that could do with a
tidy-up in SS4 after the switch to PSR-1/2.
The command used was this:
for match in '*.ss' '*.css' '*.scss' '*.html' '*.yml' '*.php' '*.js' '*.csv' '*.inc' '*.php5'; do
find . -path ./thirdparty -not -prune -o -path ./admin/thirdparty -not -prune -o -type f -name "$match" -exec sed -E -i '' 's/[[:space:]]+$//' {} \+
find . -path ./thirdparty -not -prune -o -path ./admin/thirdparty -not -prune -o -type f -name "$match" | xargs perl -pi -e 's/ +$//'
done
423 lines
7.8 KiB
SCSS
423 lines
7.8 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 8px;
|
|
line-height: 24px;
|
|
background-color: lighten($color-dark-bg,10%);
|
|
@include background-image(
|
|
linear-gradient(lighten($color-dark-bg,20%), $color-dark-bg)
|
|
);
|
|
|
|
span {
|
|
color: $color-text-light;
|
|
display: block;
|
|
padding-left:26px;
|
|
|
|
a {
|
|
color: $color-text-dark-link;
|
|
display: inline;
|
|
}
|
|
}
|
|
}
|
|
|
|
.cms-logo {
|
|
border-bottom: 1px solid lighten($color-dark-bg,4%);
|
|
overflow: hidden;
|
|
padding: $grid-y*1.5 0 $grid-y*1.5-1; /* should come to 52px with border bottom and line-height */
|
|
position: relative;
|
|
vertical-align: middle;
|
|
font-size: $font-base-size;
|
|
min-height: 28px;
|
|
|
|
.collapsed & {
|
|
padding:0;
|
|
}
|
|
.version {
|
|
display: none;
|
|
}
|
|
a {
|
|
position: absolute;
|
|
top: $grid-y;
|
|
bottom: $grid-y;
|
|
display: block;
|
|
width: 24px;
|
|
background: $application-logo-small no-repeat left center;
|
|
text-indent: -9999em;
|
|
padding: 0 1px;
|
|
left: 0;
|
|
}
|
|
span {
|
|
font-weight: bold;
|
|
font-size: $font-base-size;
|
|
line-height: 16px;
|
|
padding: 6px 0;
|
|
margin-left: 30px;
|
|
}
|
|
}
|
|
|
|
.cms-login-status {
|
|
border-top: 1px solid $color-dark-separator;
|
|
padding: $grid-y*1.5 0;
|
|
line-height: 16px;
|
|
font-size: $font-base-size - 1;
|
|
|
|
.logout-link {
|
|
float: left;
|
|
font-size: 16px;
|
|
height: 16px;
|
|
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-base;
|
|
width: ($grid-x * 20);
|
|
|
|
@include box-shadow($color-shadow-blacker 0 0 3px);
|
|
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;
|
|
}
|
|
|
|
&.collapsed {
|
|
width: 40px !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;
|
|
span.text {
|
|
display: none;
|
|
}
|
|
ul {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.cms-login-status {
|
|
height: 28px;
|
|
span {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.cms-logo {
|
|
height: 28px;
|
|
padding: 12px 0 11px;
|
|
}
|
|
|
|
&.cms-panel .cms-panel-content {
|
|
display: block; // override panel defaults
|
|
}
|
|
|
|
.ss-ui-button.sticky-toggle {
|
|
width: 50%;
|
|
}
|
|
}
|
|
|
|
.cms-panel-toggle {
|
|
a,
|
|
a.toggle-expand {
|
|
float: right;
|
|
width: 20px;
|
|
}
|
|
}
|
|
|
|
.ss-ui-button.sticky-toggle {
|
|
float: left;
|
|
width: 24px;
|
|
height: 24px;
|
|
margin: 0;
|
|
text-indent: -999em;
|
|
background-color: transparent;
|
|
background-image: url(../images/sticky-toggle-off.png);
|
|
background-repeat: no-repeat;
|
|
background-position: 3px;
|
|
border: 0;
|
|
|
|
&:hover {
|
|
@include 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: 5px 6px 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.sticky-status-indicator {
|
|
display: none;
|
|
position: absolute;
|
|
top: -22px;
|
|
left: 2px;
|
|
font-size: 9px;
|
|
color: #555d60;
|
|
text-transform: uppercase;
|
|
background-color: $color-base;
|
|
}
|
|
}
|
|
|
|
.cms-menu-list {
|
|
li {
|
|
a {
|
|
display: block;
|
|
line-height: $grid-y * 2;
|
|
min-height: $grid-y * 2;
|
|
font-size: $font-base-size;
|
|
text-shadow: lighten($color-base, 5%) 1px 1px 0;
|
|
color: $color-text-dark;
|
|
padding: (1.5 * $grid-y - 1) 5px (1.5 * $grid-y - 1) 8px;
|
|
background-color: $color-base;
|
|
cursor: pointer;
|
|
position: relative;
|
|
|
|
@include background-image(linear-gradient(
|
|
$color-base,
|
|
darken($color-base, 10%)
|
|
));
|
|
|
|
border-top: 1px solid lighten($color-base, 6%);
|
|
border-bottom: 1px solid darken($color-base, 20%);
|
|
|
|
&:hover {
|
|
text-decoration: none;
|
|
background-color: lighten($color-base, 2%);
|
|
border-bottom: 1px solid darken($color-base, 15%);
|
|
color: lighten($color-text-dark, 5%);
|
|
|
|
@include background-image(linear-gradient(
|
|
lighten($color-base, 5%),
|
|
$color-base
|
|
));
|
|
}
|
|
&:focus,
|
|
&:active {
|
|
border-top: 1px solid darken($color-base, 5%);
|
|
text-decoration: none;
|
|
background-color: darken($color-base, 5%);
|
|
color: lighten($color-text-dark, 10%);
|
|
|
|
@include background-image(linear-gradient(
|
|
darken($color-base, 10%),
|
|
darken($color-base, 5%)
|
|
));
|
|
}
|
|
|
|
.icon {
|
|
display: block;
|
|
position: absolute;
|
|
top: 50%;
|
|
margin-left: $grid-x / 2;
|
|
margin-top: -8px;
|
|
|
|
@include opacity(0.7);
|
|
}
|
|
|
|
.text {
|
|
display: block;
|
|
margin-left: 30px;
|
|
}
|
|
|
|
.toggle-children {
|
|
display: inline-block;
|
|
float: right;
|
|
width: 20px;
|
|
height: 100%;
|
|
cursor: pointer;
|
|
|
|
.toggle-children-icon {
|
|
display: inline-block;
|
|
width: 8px;
|
|
height: 8px;
|
|
background: sprite($sprites32, menu-arrow-deselected-down) no-repeat;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
&.opened {
|
|
.toggle-children-icon {
|
|
background: sprite($sprites32, menu-arrow-deselected-up) no-repeat;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
ul li a {
|
|
border-top: 1px solid lighten($color-base, 2%);
|
|
}
|
|
|
|
&.current { //need to apply current stlye to flyout also (at least line height)
|
|
a {
|
|
color: $color-text-light;
|
|
text-shadow: darken($color-menu-button, 20%) 0 -1px 0;
|
|
border-top: 1px solid lighten($color-menu-button, 10%);
|
|
border-bottom: 1px solid darken($color-menu-button, 15%);
|
|
background-color: $color-menu-button;
|
|
@include background-image(linear-gradient(
|
|
$color-menu-button,
|
|
darken($color-menu-button, 10%)
|
|
));
|
|
|
|
.toggle-children {
|
|
.toggle-children-icon {
|
|
background: sprite($sprites32, menu-arrow-down) no-repeat;
|
|
}
|
|
|
|
&.opened {
|
|
.toggle-children-icon {
|
|
background: sprite($sprites32, menu-arrow-up) no-repeat;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
ul {
|
|
border-top: none;
|
|
display: block;
|
|
}
|
|
|
|
li {
|
|
background-color: darken($color-menu-button, 10%);
|
|
a {
|
|
font-size: $font-base-size - 1;
|
|
padding: 0 10px 0 40px;
|
|
height: 32px;
|
|
line-height: 32px;
|
|
color: lighten($color-menu-button, 45%);
|
|
background: none;
|
|
border-top: 1px solid darken($color-menu-button,4%);
|
|
border-bottom: 1px solid darken($color-menu-button, 20%);
|
|
|
|
&.current,
|
|
&:hover {
|
|
background: darken($color-menu-button, 5%);
|
|
border-top: 1px solid darken($color-menu-button, 5%);
|
|
color: $color-text-light;
|
|
}
|
|
|
|
&:focus {
|
|
background: darken($color-menu-button, 15%);
|
|
border-top: 1px solid darken($color-menu-button, 20%);
|
|
color: lighten($color-menu-button, 60%);
|
|
}
|
|
|
|
}
|
|
|
|
&.current {
|
|
background: darken($color-menu-button, 5%);
|
|
border-top: 1px solid darken($color-menu-button, 5%);
|
|
border-top: none;
|
|
a {
|
|
font-weight: bold;
|
|
color: $color-text-light;
|
|
}
|
|
}
|
|
|
|
&.first a {
|
|
border-top: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
ul.collapse {
|
|
display: none;
|
|
li {
|
|
a {
|
|
background-image:none;
|
|
font-size: 11px;
|
|
padding: 0 10px 0 40px;
|
|
height: 32px;
|
|
line-height: 32px;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Style applied to the menu flyout only when the collapsed setting */
|
|
ul.collapsed-flyout {
|
|
display: block;
|
|
|
|
li {
|
|
a {
|
|
font-size: $font-base-size - 1;
|
|
padding: 0 10px 0 16px;
|
|
height: 32px;
|
|
line-height: 32px;
|
|
}
|
|
|
|
&.current a {
|
|
font-weight: bold;
|
|
}
|
|
|
|
&.first a {
|
|
border-top: 1px solid darken($color-base, 10%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.collapsed {
|
|
li {
|
|
.text, .toggle-children {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
li > li {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|