mirror of
https://github.com/silverstripe/silverstripe-framework
synced 2024-10-22 14:05:37 +02:00
Rewrite preview for border-box and use variables
This commit is contained in:
Paul Clarke
parent
c5510fc416
commit
2acbad1bb0
191
admin/client/dist/styles/bundle.css
vendored
191
admin/client/dist/styles/bundle.css
vendored
@ -4812,8 +4812,8 @@ input[type=button].btn-block,input[type=reset].btn-block,input[type=submit].btn-
|
||||
|
||||
.nav-tabs .nav-link{
|
||||
display:block;
|
||||
padding:1.2308rem .3077rem 1.077rem;
|
||||
border:.1538rem solid transparent;
|
||||
padding:1.2308rem .3077rem 1.07695rem;
|
||||
border:.15385rem solid transparent;
|
||||
border-radius:.25rem .25rem 0 0;
|
||||
}
|
||||
|
||||
@ -4849,7 +4849,7 @@ input[type=button].btn-block,input[type=reset].btn-block,input[type=submit].btn-
|
||||
|
||||
.nav-pills .nav-link{
|
||||
display:block;
|
||||
padding:1.2308rem .3077rem 1.077rem;
|
||||
padding:1.2308rem .3077rem 1.07695rem;
|
||||
border-radius:.25rem;
|
||||
}
|
||||
|
||||
@ -9759,7 +9759,7 @@ body.cms{
|
||||
float:none;
|
||||
font-weight:400;
|
||||
color:#66727d;
|
||||
padding:1.2308rem .3077rem 1.077rem;
|
||||
padding:1.2308rem .3077rem 1.07695rem;
|
||||
line-height:20px;
|
||||
}
|
||||
|
||||
@ -9783,7 +9783,7 @@ body.cms{
|
||||
|
||||
.ui-tabs .ui-tabs-nav .ui-state-default a{
|
||||
color:#7f8c97;
|
||||
border-bottom:.1538rem solid transparent;
|
||||
border-bottom:.15385rem solid transparent;
|
||||
}
|
||||
|
||||
.ui-tabs .ui-tabs-nav .ui-state-default a:hover{
|
||||
@ -9862,8 +9862,8 @@ body.cms{
|
||||
}
|
||||
|
||||
.ui-tabs .cms-content-header-tabs .ui-tabs-nav .ui-state-active .nav-link,.ui-tabs .cms-content-header-tabs .ui-tabs-nav .ui-state-active a,.ui-tabs.cms-tabset-primary .ui-tabs-nav .ui-state-active .nav-link,.ui-tabs.cms-tabset-primary .ui-tabs-nav .ui-state-active a,.ui-tabs .ui-tabs-nav.cms-tabset-nav-primary .ui-state-active .nav-link,.ui-tabs .ui-tabs-nav.cms-tabset-nav-primary .ui-state-active a{
|
||||
border-bottom:.1538rem solid #4f5861;
|
||||
padding:1.2308rem .3077rem 1.077rem;
|
||||
border-bottom:.15385rem solid #4f5861;
|
||||
padding:1.2308rem .3077rem 1.07695rem;
|
||||
}
|
||||
|
||||
.cms-content-header-tabs{
|
||||
@ -9896,7 +9896,7 @@ body.cms{
|
||||
}
|
||||
|
||||
.panel--padded .ui-tabs-nav .nav-link{
|
||||
padding:1.2308rem .3077rem 1.077rem;
|
||||
padding:1.2308rem .3077rem 1.07695rem;
|
||||
}
|
||||
|
||||
.cms-content-loading-overlay{
|
||||
@ -12561,6 +12561,10 @@ li.class-ErrorPage>a .jstree-pageicon{
|
||||
max-width:150px;
|
||||
}
|
||||
|
||||
.preview__device{
|
||||
height:100%;
|
||||
}
|
||||
|
||||
.cms-preview{
|
||||
background-color:#f6f7f8;
|
||||
border-left:1px solid #ced3d9;
|
||||
@ -12601,116 +12605,179 @@ li.class-ErrorPage>a .jstree-pageicon{
|
||||
|
||||
.cms-preview .panel--scrollable{
|
||||
position:relative;
|
||||
height:calc(100vh - 53px);
|
||||
}
|
||||
|
||||
.cms-preview .panel--scrollable .preview-device-outer{
|
||||
height:100%;
|
||||
width:100%;
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
.cms-preview .panel--scrollable .preview-device-outer .preview-device-inner{
|
||||
.cms-preview .panel--scrollable .preview-device-inner{
|
||||
box-sizing:border-box;
|
||||
width:100%;
|
||||
height:100%;
|
||||
background-color:#fff;
|
||||
}
|
||||
|
||||
.cms-preview .panel--scrollable .preview-device-outer .preview-device-inner iframe{
|
||||
.cms-preview .panel--scrollable .preview-device-inner iframe{
|
||||
height:100%;
|
||||
overflow-y:auto;
|
||||
width:100%;
|
||||
border:0;
|
||||
}
|
||||
|
||||
.cms-preview.desktop .panel--scrollable,.cms-preview.mobile .panel--scrollable,.cms-preview.mobileLandscape .panel--scrollable,.cms-preview.tablet .panel--scrollable,.cms-preview.tabletLandscape .panel--scrollable{
|
||||
.cms-preview.desktop .panel--scrollable,.cms-preview.mobile .panel--scrollable,.cms-preview.tablet .panel--scrollable{
|
||||
background-color:#f6f7f8;
|
||||
overflow-x:auto;
|
||||
}
|
||||
|
||||
.cms-preview.desktop .panel--scrollable .preview-device-outer,.cms-preview.mobile .panel--scrollable .preview-device-outer,.cms-preview.mobileLandscape .panel--scrollable .preview-device-outer,.cms-preview.tablet .panel--scrollable .preview-device-outer,.cms-preview.tabletLandscape .panel--scrollable .preview-device-outer{
|
||||
.cms-preview.desktop .preview__device,.cms-preview.mobile .preview__device,.cms-preview.tablet .preview__device{
|
||||
margin:auto;
|
||||
text-align:center;
|
||||
height:auto;
|
||||
}
|
||||
|
||||
.cms-preview.desktop .preview__device:after,.cms-preview.mobile .preview__device:after,.cms-preview.tablet .preview__device:after{
|
||||
color:#7f8b97;
|
||||
position:relative;
|
||||
top:-24px;
|
||||
-webkit-transition:all .3s ease-in-out;
|
||||
transition:all .3s ease-in-out;
|
||||
}
|
||||
|
||||
.cms-preview.desktop .preview-device-outer,.cms-preview.mobile .preview-device-outer,.cms-preview.tablet .preview-device-outer{
|
||||
-webkit-transition:all .3s ease-out;
|
||||
transition:all .3s ease-out;
|
||||
border-radius:7px;
|
||||
background:#d5dde2;
|
||||
border:1px solid transparent;
|
||||
border-left:1px solid #cfd9de;
|
||||
padding:16px;
|
||||
padding:1.2308rem;
|
||||
box-sizing:content-box;
|
||||
text-align:left;
|
||||
margin:1.2308rem auto 2.4616rem;
|
||||
}
|
||||
|
||||
.cms-preview.desktop .panel--scrollable .preview-device-outer .preview-device-inner,.cms-preview.mobile .panel--scrollable .preview-device-outer .preview-device-inner,.cms-preview.mobileLandscape .panel--scrollable .preview-device-outer .preview-device-inner,.cms-preview.tablet .panel--scrollable .preview-device-outer .preview-device-inner,.cms-preview.tabletLandscape .panel--scrollable .preview-device-outer .preview-device-inner{
|
||||
border-top:2px solid #e1e7ea;
|
||||
border-right:1px solid transparent;
|
||||
border-bottom:1px solid #e1e7ea;
|
||||
border-left:1px solid #c3cfd6;
|
||||
}
|
||||
|
||||
.cms-preview.mobile .panel--scrollable .preview-device-outer{
|
||||
.cms-preview.mobile .preview-device-outer,.cms-preview.tablet .preview-device-outer{
|
||||
-webkit-transform:rotate(0deg);
|
||||
transform:rotate(0deg);
|
||||
-webkit-transition:all .3s ease-in 1s;
|
||||
transition:all .3s ease-in 1s;
|
||||
margin:20px auto;
|
||||
-webkit-transition:all .3s ease-in;
|
||||
transition:all .3s ease-in;
|
||||
overflow:hidden;
|
||||
padding-top:16px;
|
||||
}
|
||||
|
||||
.cms-preview.mobile .panel--scrollable .preview-device-outer .preview-device-inner{
|
||||
-webkit-transform:rotate(0deg);
|
||||
transform:rotate(0deg);
|
||||
-webkit-transition:all .3s ease-out 1s;
|
||||
transition:all .3s ease-out 1s;
|
||||
.cms-preview.mobile .preview-device-outer:after,.cms-preview.tablet .preview-device-outer:after{
|
||||
content:'Rotate';
|
||||
font-size:.769rem;
|
||||
text-transform:uppercase;
|
||||
color:#879fac;
|
||||
top:0;
|
||||
right:1.2308rem;
|
||||
position:absolute;
|
||||
letter-spacing:.5px;
|
||||
}
|
||||
|
||||
.cms-preview.mobile .panel--scrollable .preview-device-outer.rotate{
|
||||
.cms-preview.mobile .preview-device-outer:hover,.cms-preview.tablet .preview-device-outer:hover{
|
||||
background:#b4c3cb;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
.cms-preview.mobile .preview-device-outer:hover:after,.cms-preview.tablet .preview-device-outer:hover:after{
|
||||
color:#fff;
|
||||
}
|
||||
|
||||
.cms-preview.mobile .rotate:after,.cms-preview.tablet .rotate:after{
|
||||
top:-148px;
|
||||
}
|
||||
|
||||
.cms-preview.mobile .rotate .preview-device-outer,.cms-preview.tablet .rotate .preview-device-outer{
|
||||
-webkit-transform:rotate(-90deg);
|
||||
transform:rotate(-90deg);
|
||||
-webkit-transition:all .3s ease-in 1s;
|
||||
transition:all .3s ease-in 1s;
|
||||
height:583px;
|
||||
margin:0 auto;
|
||||
width:320px;
|
||||
}
|
||||
|
||||
.cms-preview.mobile .panel--scrollable .preview-device-outer.rotate .preview-device-inner{
|
||||
-webkit-transform-origin:160px 160px;
|
||||
transform-origin:160px 160px;
|
||||
.cms-preview.mobile .rotate .preview-device-outer .preview-device-inner,.cms-preview.tablet .rotate .preview-device-outer .preview-device-inner{
|
||||
-webkit-transform:rotate(90deg);
|
||||
transform:rotate(90deg);
|
||||
-webkit-transition:all .3s ease-out 1s;
|
||||
transition:all .3s ease-out 1s;
|
||||
}
|
||||
|
||||
.cms-preview.mobile .preview-device-inner,.cms-preview.tablet .preview-device-inner{
|
||||
-webkit-transform:rotate(0deg);
|
||||
transform:rotate(0deg);
|
||||
-webkit-transition:all .3s ease-out;
|
||||
transition:all .3s ease-out;
|
||||
}
|
||||
|
||||
.cms-preview.mobile .preview__device{
|
||||
min-width:calc(320px + 1.2308rem * 4);
|
||||
}
|
||||
|
||||
.cms-preview.mobile .preview__device:after{
|
||||
content:"320px x 568px";
|
||||
}
|
||||
|
||||
.cms-preview.mobile .preview-device-outer{
|
||||
min-height:568px;
|
||||
width:320px;
|
||||
height:568px;
|
||||
text-align:left;
|
||||
}
|
||||
|
||||
.cms-preview.mobile .rotate{
|
||||
min-width:calc(568px + 1.2308rem * 4);
|
||||
}
|
||||
|
||||
.cms-preview.mobile .rotate:after{
|
||||
content:"568px x 320px";
|
||||
}
|
||||
|
||||
.cms-preview.mobile .rotate .preview-device-inner{
|
||||
-webkit-transform-origin:160px;
|
||||
transform-origin:160px;
|
||||
height:320px;
|
||||
width:583px;
|
||||
width:568px;
|
||||
}
|
||||
|
||||
.cms-preview.mobileLandscape .panel--scrollable .preview-device-outer{
|
||||
margin:12% auto;
|
||||
padding-top:16px;
|
||||
.cms-preview.tablet .preview__device{
|
||||
min-width:calc(768px + 1.2308rem * 4);
|
||||
}
|
||||
|
||||
.cms-preview.mobileLandscape .panel--scrollable .preview-device-outer,.cms-preview.mobileLandscape .panel--scrollable .preview-device-outer .preview-device-inner,.cms-preview.tablet .panel--scrollable .preview-device-outer{
|
||||
-webkit-transition:all .3s ease-out 1s;
|
||||
transition:all .3s ease-out 1s;
|
||||
.cms-preview.tablet .preview__device:after{
|
||||
content:"768px x 1024px";
|
||||
}
|
||||
|
||||
.cms-preview.tablet .panel--scrollable .preview-device-outer{
|
||||
margin:0 auto;
|
||||
.cms-preview.tablet .preview-device-outer{
|
||||
min-height:1024px;
|
||||
width:768px;
|
||||
height:1024px;
|
||||
}
|
||||
|
||||
.cms-preview.tablet .panel--scrollable .preview-device-outer .preview-device-inner,.cms-preview.tabletLandscape .panel--scrollable .preview-device-outer{
|
||||
-webkit-transition:all .3s ease-out 1s;
|
||||
transition:all .3s ease-out 1s;
|
||||
.cms-preview.tablet .rotate{
|
||||
min-width:calc(1024px + 1.2308rem * 4);
|
||||
}
|
||||
|
||||
.cms-preview.tabletLandscape .panel--scrollable .preview-device-outer{
|
||||
margin:0 auto;
|
||||
.cms-preview.tablet .rotate:after{
|
||||
content:"1024px x 768px";
|
||||
}
|
||||
|
||||
.cms-preview.desktop .panel--scrollable .preview-device-outer,.cms-preview.tabletLandscape .panel--scrollable .preview-device-outer .preview-device-inner{
|
||||
-webkit-transition:all .3s ease-out 1s;
|
||||
transition:all .3s ease-out 1s;
|
||||
.cms-preview.tablet .rotate .preview-device-inner{
|
||||
-webkit-transform-origin:384px;
|
||||
transform-origin:384px;
|
||||
height:768px;
|
||||
width:1024px;
|
||||
}
|
||||
|
||||
.cms-preview.desktop .panel--scrollable .preview-device-outer{
|
||||
margin:0 auto;
|
||||
.cms-preview.desktop .preview__device{
|
||||
min-width:calc(1366px + 1.2308rem * 4);
|
||||
}
|
||||
|
||||
.cms-preview.desktop .preview__device:after{
|
||||
content:"1366px x 768px";
|
||||
}
|
||||
|
||||
.cms-preview.desktop .preview-device-outer{
|
||||
min-height:768px;
|
||||
width:1366px;
|
||||
height:768px;
|
||||
}
|
||||
|
||||
.cms .ss-ui-action-tabset{
|
||||
|
||||
@ -230,6 +230,10 @@
|
||||
}
|
||||
|
||||
/* Styling for the preview screen sizes */
|
||||
.preview__device {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.cms-preview {
|
||||
background-color: $tab-panel-texture-color;
|
||||
border-left: 1px solid $border-color-dark;
|
||||
@ -264,18 +268,22 @@
|
||||
width: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.panel--scrollable {
|
||||
position: relative;
|
||||
height: calc(100vh - #{$toolbar-total-height});
|
||||
|
||||
.preview-device-outer {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.preview-device-inner {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height:100%;
|
||||
background-color: #FFF;
|
||||
height: 100%;
|
||||
background-color: $white;
|
||||
|
||||
iframe {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
@ -284,78 +292,162 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.mobile, &.mobileLandscape, &.tablet, &.tabletLandscape, &.desktop {
|
||||
|
||||
&.mobile,
|
||||
&.tablet,
|
||||
&.desktop {
|
||||
.panel--scrollable {
|
||||
background-color: $tab-panel-texture-color; /* cover website preview icon */
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.preview__device {
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
height: auto;
|
||||
|
||||
&::after {
|
||||
color: $body-color-lighter;
|
||||
position: relative;
|
||||
top: -24px;
|
||||
transition: all .3s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
.preview-device-outer {
|
||||
transition: all .3s ease-out;
|
||||
border-radius: 7px;
|
||||
background: lighten(#D2DBE0, 1%);
|
||||
border: 1px solid transparent;
|
||||
border-left:1px solid darken(#D2DBE0, 1%);
|
||||
padding: 16px;
|
||||
padding: $spacer-y;
|
||||
box-sizing: content-box;
|
||||
.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%);
|
||||
text-align: left;
|
||||
margin: $spacer-y auto #{$spacer-y * 2};
|
||||
}
|
||||
}
|
||||
|
||||
&.mobile,
|
||||
&.tablet {
|
||||
.preview-device-outer {
|
||||
transform: rotate(0deg);
|
||||
transition: all .3s ease-in;
|
||||
overflow: hidden;
|
||||
|
||||
&::after {
|
||||
content: 'Rotate';
|
||||
font-size: $font-size-xxs;
|
||||
text-transform: uppercase;
|
||||
color: darken(#D2DBE0, 25%);
|
||||
top: 0;
|
||||
right: $spacer-x;
|
||||
position: absolute;
|
||||
letter-spacing: .5px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken(#D2DBE0, 10%);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&:hover::after {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.rotate {
|
||||
&::after {
|
||||
top: -148px;
|
||||
}
|
||||
|
||||
.preview-device-outer {
|
||||
transform: rotate(-90deg);
|
||||
|
||||
.preview-device-inner {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.preview-device-inner {
|
||||
transform: rotate(0deg);
|
||||
transition: all .3s ease-out;
|
||||
}
|
||||
}
|
||||
|
||||
&.mobile {
|
||||
.panel--scrollable .preview-device-outer {
|
||||
transform: rotate(0deg);
|
||||
transition: all .3s ease-in 1s;
|
||||
margin: 20px auto 20px;
|
||||
overflow:hidden;
|
||||
padding-top: 16px;
|
||||
.preview__device {
|
||||
min-width: calc(#{$mobile-width} + #{$spacer-x} * 4);
|
||||
|
||||
&::after {
|
||||
content: '#{$mobile-width} x #{$mobile-height}';
|
||||
}
|
||||
}
|
||||
|
||||
.preview-device-outer {
|
||||
min-height: $mobile-height;
|
||||
width: $mobile-width;
|
||||
height: $mobile-height;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.rotate {
|
||||
min-width: calc(#{$mobile-height} + #{$spacer-x} * 4);
|
||||
|
||||
&::after {
|
||||
content: '#{$mobile-height} x #{$mobile-width}';
|
||||
}
|
||||
|
||||
.preview-device-inner {
|
||||
transform: rotate(0deg);
|
||||
transition: all .3s ease-out 1s;
|
||||
transform-origin: $mobile-width / 2;
|
||||
height: $mobile-width;
|
||||
width: $mobile-height;
|
||||
}
|
||||
&.rotate {
|
||||
transform: rotate(-90deg);
|
||||
transition: all .3s ease-in 1s;
|
||||
height: 583px;
|
||||
margin: 0px auto 0px;
|
||||
width: 320px;
|
||||
}
|
||||
}
|
||||
|
||||
&.tablet {
|
||||
.preview__device {
|
||||
min-width: calc(#{$tablet-width} + #{$spacer-x} * 4);
|
||||
|
||||
&::after {
|
||||
content: '#{$tablet-width} x #{$tablet-height}';
|
||||
}
|
||||
}
|
||||
|
||||
.preview-device-outer {
|
||||
min-height: $tablet-height;
|
||||
width: $tablet-width;
|
||||
height: $tablet-height;
|
||||
}
|
||||
|
||||
.rotate {
|
||||
min-width: calc(#{$tablet-height} + #{$spacer-x} * 4);
|
||||
|
||||
&::after {
|
||||
content: '#{$tablet-height} x #{$tablet-width}';
|
||||
}
|
||||
|
||||
.preview-device-inner {
|
||||
transform-origin: 160px 160px;
|
||||
transform: rotate(90deg);
|
||||
transition: all .3s ease-out 1s;
|
||||
height: 320px;
|
||||
width: 583px;
|
||||
transform-origin: $tablet-width / 2;
|
||||
height: $tablet-width;
|
||||
width: $tablet-height;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.mobileLandscape .panel--scrollable .preview-device-outer {
|
||||
transition: all .3s ease-out 1s;
|
||||
margin: 12% auto;
|
||||
padding-top: 16px;
|
||||
.preview-device-inner {
|
||||
transition: all .3s ease-out 1s;
|
||||
|
||||
&.desktop {
|
||||
.preview__device {
|
||||
min-width: calc(#{$desktop-width} + #{$spacer-x} * 4);
|
||||
|
||||
&::after {
|
||||
content: '#{$desktop-width} x #{$desktop-height}';
|
||||
}
|
||||
}
|
||||
&.tablet .panel--scrollable .preview-device-outer {
|
||||
transition: all .3s ease-out 1s;
|
||||
margin: 0 auto;
|
||||
.preview-device-inner {
|
||||
transition: all .3s ease-out 1s;
|
||||
|
||||
.preview-device-outer {
|
||||
min-height: $desktop-height;
|
||||
width: $desktop-width;
|
||||
height: $desktop-height;
|
||||
}
|
||||
}
|
||||
&.tabletLandscape .panel--scrollable .preview-device-outer {
|
||||
transition: all .3s ease-out 1s;
|
||||
margin: 0 auto;
|
||||
.preview-device-inner {
|
||||
transition: all .3s ease-out 1s;
|
||||
}
|
||||
}
|
||||
&.desktop .panel--scrollable .preview-device-outer {
|
||||
transition: all .3s ease-out 1s;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user