mirror of
https://github.com/silverstripe/silverstripe-framework
synced 2024-10-22 14:05:37 +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
377 lines
8.0 KiB
SCSS
377 lines
8.0 KiB
SCSS
|
|
/* -------------------------- */
|
|
.cms-content-controls{
|
|
|
|
/* Styling the background, controls sit on */
|
|
&.cms-preview-controls {
|
|
z-index: 1;
|
|
background: $color-widget-bg;
|
|
height: 30px; /* should be set in js Layout to match page actions */
|
|
padding: $grid-y*1.5 $grid-y*1.5;
|
|
}
|
|
|
|
/* Styling for icons in controls */
|
|
.icon-view, .preview-selector.dropdown a.chzn-single {
|
|
white-space: nowrap;
|
|
&:before {
|
|
display:inline-block;
|
|
float:left;
|
|
width: 20px;
|
|
overflow: hidden;
|
|
color: $color-text-dark;
|
|
}
|
|
}
|
|
|
|
.cms-navigator{
|
|
width: 100%;
|
|
}
|
|
|
|
/* Preview selectors. Overrides default chosen styles and applies its own */
|
|
.preview-selector {
|
|
float:right;
|
|
border-bottom:none;
|
|
position:relative;
|
|
@include box-shadow(none);
|
|
margin: 2px 0 0 4px;
|
|
padding: 0;
|
|
height: 28px;
|
|
|
|
a.chzn-single {
|
|
width: 16px;
|
|
padding: 6px;
|
|
height: 16px;
|
|
margin: -2px 0 0;
|
|
filter: none; /* remove ie background */
|
|
background: none;
|
|
border: none;
|
|
@include box-shadow(none);
|
|
@include border-radius(3px);
|
|
|
|
&::before {
|
|
font-size: 18px;
|
|
margin-top: -1px;
|
|
margin-left: -1px;
|
|
}
|
|
|
|
&:hover, &.chzn-single-with-drop {
|
|
background-color: darken($color-widget-bg,6%);
|
|
@include box-shadow(0 0 3px rgba(0, 0, 0, 0.05) inset, 0 1px 0 $box-shadow-shine);
|
|
}
|
|
&.chzn-single-with-drop {
|
|
@include border-radius(0 0 3px 3px);
|
|
}
|
|
div {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
&.open .chzn-drop{
|
|
position:absolute;
|
|
left: auto !important; //over-ride chosen inline styles
|
|
right: 0;
|
|
}
|
|
|
|
.chzn-drop{
|
|
@include border-radius(3px 3px 0 3px);
|
|
@include box-shadow(0 0 3px rgba(0, 0, 0, 0.1));
|
|
.chzn-results {
|
|
width: 135px;
|
|
.result-selected {
|
|
background: $color-widget-bg;
|
|
}
|
|
}
|
|
}
|
|
.chzn-container {
|
|
width: auto !important; //over-ride chosen inline styles for preview selector
|
|
|
|
&.chzn-with-rise {
|
|
.chzn-drop {
|
|
padding: 0;
|
|
border-bottom: 1px solid #aaa;
|
|
margin-top: -5px;
|
|
width: auto !important; //over-ride chosen inline width (doesn't take image into account)
|
|
|
|
.chzn-search {
|
|
display: none;
|
|
}
|
|
|
|
ul {
|
|
padding: 0;
|
|
margin: 0;
|
|
overflow: visible;
|
|
|
|
li{
|
|
font-size: 12px;
|
|
line-height: 16px;
|
|
padding: 7px 16px 7px 6px;
|
|
color: $color-text-blue-link;
|
|
border-bottom: 1px solid #DDD;
|
|
background-color: #FFF;
|
|
|
|
&:before{
|
|
margin-right: 2px;
|
|
font-size: 16px;
|
|
}
|
|
&.description {
|
|
padding-top: 5px;
|
|
padding-bottom: 5px;
|
|
&:before{
|
|
margin-top: 5px;
|
|
}
|
|
}
|
|
&.highlighted, &:hover, &:focus {
|
|
color: $color-text-blue-link;
|
|
filter: none;
|
|
background: lighten($color-widget-bg,2%);
|
|
text-decoration: none;
|
|
}
|
|
&.first {
|
|
@include border-radius(3px 3px 0 0);
|
|
}
|
|
&.last {
|
|
border-bottom: none;
|
|
@include border-radius(0 0 0 3px);
|
|
}
|
|
&.restricted { /* disable option (eg.split mode for smaller screen sizes) */
|
|
color: #CCC;
|
|
background-color: #EEE;
|
|
pointer-events: none;
|
|
/*text-decoration: line-through;*/
|
|
&:before {
|
|
opacity: 0.2;
|
|
}
|
|
}
|
|
|
|
/* Description styling */
|
|
span {
|
|
display:block;
|
|
color: lighten($color-text-dark, 30%);
|
|
font-size:0.85em;
|
|
line-height:1.1em;
|
|
padding-left:23px;
|
|
}
|
|
.icon-view {
|
|
margin-right: 4px;
|
|
}
|
|
|
|
}
|
|
|
|
.disabled-tooltip {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 32px;
|
|
background: rgba(255,255,255,0); // Prevent clicking on browsers that do not support pointer-events: none;
|
|
|
|
&::before {
|
|
content: 'Screen size too small';
|
|
text-align: center;
|
|
background: #555;
|
|
color: white;
|
|
padding: 4px 0;
|
|
position: absolute;
|
|
top: -24px;
|
|
left: -1px;
|
|
right: -1px;
|
|
border-radius: 3px 3px 0 0;
|
|
display: none;
|
|
z-index: 2;
|
|
}
|
|
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 10px;
|
|
height: 10px;
|
|
@include rotate(45deg);
|
|
display: none;
|
|
background: #555;
|
|
left: 47%;
|
|
top: -6px;
|
|
}
|
|
|
|
&:hover::after,
|
|
&:hover::before {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.chzn-drop ul.chzn-results li.result-selected {
|
|
background: darken($color-widget-bg, 2%);
|
|
color: $color-text;
|
|
&.highlighted, &:hover, &:focus {
|
|
background: darken($color-widget-bg, 2%);
|
|
color: $color-text;
|
|
}
|
|
}
|
|
|
|
&.split-disabled {
|
|
.chzn-container.chzn-with-rise .chzn-drop ul li.font-icon-columns {
|
|
color: $color-text-disabled;
|
|
pointer-events: none;
|
|
|
|
&.highlighted, &:hover, &:focus {
|
|
color: $color-text-disabled;
|
|
background: #fff;
|
|
cursor: default;
|
|
}
|
|
|
|
&::before {
|
|
color: $color-text-disabled;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.cms-preview-states{
|
|
float: right;
|
|
select{
|
|
max-width:150px;
|
|
}
|
|
|
|
&.dropdown{
|
|
max-width:150px;
|
|
a.chzn-single{
|
|
span{
|
|
margin:0;
|
|
}
|
|
}
|
|
.chzn-container{
|
|
max-width:150px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Styling for the preview screen sizes */
|
|
.cms-preview {
|
|
background-color: $tab-panel-texture-color;
|
|
height: 100%;
|
|
width: 100%;
|
|
|
|
.cms-preview-overlay {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.preview-note {
|
|
color: #CDD7DC;
|
|
display: block;
|
|
font-size: 22px;
|
|
font-weight: bold;
|
|
height: 82px;
|
|
margin-top: -50px;
|
|
margin-left: -150px; /* half of width */
|
|
position: absolute;
|
|
text-align: center;
|
|
text-shadow: 0 1px 0 #fff;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 300px;
|
|
span {
|
|
background: sprite($sprites64, preview) no-repeat;
|
|
display: block;
|
|
height: 41px;
|
|
margin: 0 auto 20px;
|
|
width: 50px;
|
|
}
|
|
}
|
|
.preview-scroll {
|
|
height: 100%;
|
|
overflow: auto;
|
|
position: relative;
|
|
width: 100%;
|
|
.preview-device-outer {
|
|
height: 100%;
|
|
width: 100%;
|
|
.preview-device-inner {
|
|
@include box-sizing('border-box');
|
|
width: 100%;
|
|
height:100%;
|
|
background-color: #FFF;
|
|
iframe {
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&.mobile, &.mobileLandscape, &.tablet, &.tabletLandscape, &.desktop {
|
|
.preview-scroll {
|
|
background-color: $tab-panel-texture-color; /* cover website preview icon */
|
|
.preview-device-outer {
|
|
@include border-radius(7px);
|
|
background: lighten(#D2DBE0, 1%);
|
|
border: 1px solid transparent;
|
|
border-left:1px solid darken(#D2DBE0, 1%);
|
|
padding: 0 16px 16px;
|
|
.preview-device-inner {
|
|
border-top:2px solid lighten(#D2DBE0,5%);
|
|
border-right: 1px solid transparent;
|
|
border-bottom:1px solid lighten(#D2DBE0,5%);
|
|
border-left:1px solid darken(#D2DBE0, 5%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.mobile {
|
|
.preview-scroll .preview-device-outer {
|
|
@include rotate(0deg);
|
|
@include transition(all 0.3s ease-in 1s);
|
|
margin: 20px auto 20px;
|
|
overflow:hidden;
|
|
padding-top: 16px;
|
|
.preview-device-inner {
|
|
@include rotate(0deg);
|
|
@include transition(all 0.3s ease-out 1s);
|
|
}
|
|
&.rotate {
|
|
@include rotate(-90deg);
|
|
@include transition(all 0.3s ease-in 1s);
|
|
height: 583px;
|
|
margin: 0px auto 0px;
|
|
width: 320px;
|
|
.preview-device-inner {
|
|
@include apply-origin(160px 160px, false);
|
|
@include rotate(90deg);
|
|
@include transition(all 0.3s ease-out 1s);
|
|
height: 320px;
|
|
width: 583px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&.mobileLandscape .preview-scroll .preview-device-outer {
|
|
@include transition(all 0.3s ease-out 1s);
|
|
margin: 12% auto;
|
|
padding-top: 16px;
|
|
.preview-device-inner {
|
|
@include transition(all 0.3s ease-out 1s);
|
|
}
|
|
}
|
|
&.tablet .preview-scroll .preview-device-outer {
|
|
@include transition(all 0.3s ease-out 1s);
|
|
margin: 0 auto;
|
|
.preview-device-inner {
|
|
@include transition(all 0.3s ease-out 1s);
|
|
}
|
|
}
|
|
&.tabletLandscape .preview-scroll .preview-device-outer {
|
|
@include transition(all 0.3s ease-out 1s);
|
|
margin: 0 auto;
|
|
.preview-device-inner {
|
|
@include transition(all 0.3s ease-out 1s);
|
|
}
|
|
}
|
|
&.desktop .preview-scroll .preview-device-outer {
|
|
@include transition(all 0.3s ease-out 1s);
|
|
margin: 0 auto;
|
|
}
|
|
}
|