Rewrite preview for border-box and use variables

This commit is contained in:
Paul Clarke 2016-11-08 17:09:05 +13:00
parent c5510fc416
commit 2acbad1bb0
2 changed files with 289 additions and 130 deletions

View File

@ -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{

View File

@ -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,98 +268,186 @@
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;
iframe {
height: 100%;
overflow-y: auto;
width: 100%;
border: 0;
}
}
}
}
&.mobile, &.mobileLandscape, &.tablet, &.tabletLandscape, &.desktop {
.panel--scrollable {
background-color: $tab-panel-texture-color; /* cover website preview icon */
.preview-device-outer {
border-radius: 7px;
background: lighten(#D2DBE0, 1%);
border: 1px solid transparent;
border-left:1px solid darken(#D2DBE0, 1%);
padding: 16px;
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%);
}
.preview-device-inner {
box-sizing: border-box;
width: 100%;
height: 100%;
background-color: $white;
iframe {
height: 100%;
overflow-y: auto;
width: 100%;
border: 0;
}
}
}
&.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-inner {
transform: rotate(0deg);
transition: all .3s ease-out 1s;
&.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;
}
&.rotate {
}
.preview-device-outer {
transition: all .3s ease-out;
border-radius: 7px;
background: lighten(#D2DBE0, 1%);
border: 1px solid transparent;
padding: $spacer-y;
box-sizing: content-box;
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);
transition: all .3s ease-in 1s;
height: 583px;
margin: 0px auto 0px;
width: 320px;
.preview-device-inner {
transform-origin: 160px 160px;
transform: rotate(90deg);
transition: all .3s ease-out 1s;
height: 320px;
width: 583px;
}
}
}
}
&.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;
transform: rotate(0deg);
transition: all .3s ease-out;
}
}
&.tablet .panel--scrollable .preview-device-outer {
transition: all .3s ease-out 1s;
margin: 0 auto;
.preview-device-inner {
transition: all .3s ease-out 1s;
&.mobile {
.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-origin: $mobile-width / 2;
height: $mobile-width;
width: $mobile-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;
&.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: $tablet-width / 2;
height: $tablet-width;
width: $tablet-height;
}
}
}
&.desktop .panel--scrollable .preview-device-outer {
transition: all .3s ease-out 1s;
margin: 0 auto;
&.desktop {
.preview__device {
min-width: calc(#{$desktop-width} + #{$spacer-x} * 4);
&::after {
content: '#{$desktop-width} x #{$desktop-height}';
}
}
.preview-device-outer {
min-height: $desktop-height;
width: $desktop-width;
height: $desktop-height;
}
}
}