mirror of
https://github.com/silverstripe/silverstripe-framework
synced 2024-10-22 14:05:37 +02:00
Remove legacy classes for flexbox classes
This commit is contained in:
parent
0a0a990c54
commit
8b02d9d68a
65
admin/client/dist/styles/bundle.css
vendored
65
admin/client/dist/styles/bundle.css
vendored
@ -15333,10 +15333,30 @@ div.grid-field__sort-field+.form__fieldgroup-item{
|
|||||||
top:1px;
|
top:1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.preview{
|
||||||
|
position:relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width:991px){
|
||||||
|
.preview{
|
||||||
|
position:absolute;
|
||||||
|
right:0;
|
||||||
|
z-index:2;
|
||||||
|
width:100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview__iframe{
|
||||||
|
height:calc(100% - 53px);
|
||||||
|
width:100%;
|
||||||
|
border:0;
|
||||||
|
display:block;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width:991px){
|
||||||
.preview__iframe{
|
.preview__iframe{
|
||||||
width:100%;
|
width:100%;
|
||||||
height:calc(100% - 53px);
|
}
|
||||||
border:0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.preview__file-container{
|
.preview__file-container{
|
||||||
@ -15429,6 +15449,7 @@ div.grid-field__sort-field+.form__fieldgroup-item{
|
|||||||
padding-bottom:.76925rem;
|
padding-bottom:.76925rem;
|
||||||
border-top:1px solid #d9dee2;
|
border-top:1px solid #d9dee2;
|
||||||
width:100%;
|
width:100%;
|
||||||
|
background-color:#f6f7f8;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cms-backlink .toolbar__back-button,.toolbar__back-button{
|
.cms-backlink .toolbar__back-button,.toolbar__back-button{
|
||||||
@ -15893,19 +15914,23 @@ input.checkbox,input.radio,input[type=checkbox],input[type=radio]{
|
|||||||
height:100%;
|
height:100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cms-content__split--left-sm .cms-content__right{
|
@media (max-width:991px){
|
||||||
display:none;
|
.campaign-items{
|
||||||
}
|
|
||||||
|
|
||||||
.cms-content__split--left-sm .cms-content__left{
|
|
||||||
width:100%;
|
width:100%;
|
||||||
|
z-index:1;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.cms-content__split--left-sm .cms-content--selected{
|
.campaigns{
|
||||||
|
position:relative;
|
||||||
|
height:100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.campaigns .cms-content--selected{
|
||||||
display:block;
|
display:block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cms-content__split--left-sm .cms-content__back-btn{
|
.campaigns .cms-content__back-btn{
|
||||||
width:36px;
|
width:36px;
|
||||||
height:36px;
|
height:36px;
|
||||||
background-color:rgba(79,88,97,.8);
|
background-color:rgba(79,88,97,.8);
|
||||||
@ -15924,28 +15949,28 @@ input.checkbox,input.radio,input[type=checkbox],input[type=radio]{
|
|||||||
cursor:pointer;
|
cursor:pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cms-content__split--left-sm .cms-content__back-btn:hover{
|
.campaigns .cms-content__back-btn:hover{
|
||||||
background-color:#4f5861;
|
background-color:#4f5861;
|
||||||
text-decoration:none;
|
text-decoration:none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width:992px){
|
@media (min-width:992px){
|
||||||
.cms-content__split--left-sm .cms-content__left{
|
.campaigns .cms-content__left{
|
||||||
width:300px;
|
width:300px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cms-content__split--left-sm .cms-content__right{
|
.campaigns .cms-content__right{
|
||||||
display:block;
|
display:block;
|
||||||
border-left:1px solid #d9dee2;
|
border-left:1px solid #d9dee2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cms-content__split--left-sm .cms-content__back-btn{
|
.campaigns .cms-content__back-btn{
|
||||||
display:none;
|
display:none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width:1200px){
|
@media (min-width:1200px){
|
||||||
.cms-content__split--left-sm .cms-content__left{
|
.campaigns .cms-content__left{
|
||||||
width:448px;
|
width:448px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -15998,9 +16023,12 @@ input.checkbox,input.radio,input[type=checkbox],input[type=radio]{
|
|||||||
|
|
||||||
body,html{
|
body,html{
|
||||||
width:100%;
|
width:100%;
|
||||||
height:100%;
|
|
||||||
margin:0;
|
margin:0;
|
||||||
padding:0;
|
padding:0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fill-height,body,html{
|
||||||
|
height:100%;
|
||||||
display:-ms-flexbox;
|
display:-ms-flexbox;
|
||||||
display:-webkit-box;
|
display:-webkit-box;
|
||||||
display:flex;
|
display:flex;
|
||||||
@ -16013,15 +16041,14 @@ body,html{
|
|||||||
}
|
}
|
||||||
|
|
||||||
.fill-height,.fill-width{
|
.fill-height,.fill-width{
|
||||||
height:100%;
|
|
||||||
display:-ms-flexbox;
|
|
||||||
display:-webkit-box;
|
|
||||||
display:flex;
|
|
||||||
-webkit-box-direction:normal;
|
-webkit-box-direction:normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fill-width{
|
.fill-width{
|
||||||
width:100%;
|
width:100%;
|
||||||
|
display:-ms-flexbox;
|
||||||
|
display:-webkit-box;
|
||||||
|
display:flex;
|
||||||
-ms-flex-direction:row;
|
-ms-flex-direction:row;
|
||||||
-webkit-box-orient:horizontal;
|
-webkit-box-orient:horizontal;
|
||||||
flex-direction:row;
|
flex-direction:row;
|
||||||
|
@ -57,12 +57,12 @@ class Preview extends SilverStripeComponent {
|
|||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
} else {
|
} else {
|
||||||
body = <iframe className="preview__iframe" src={previewUrl}></iframe>;
|
body = <iframe className="flexbox-area-grow preview__iframe" src={previewUrl}></iframe>;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Combine elements
|
// Combine elements
|
||||||
return (
|
return (
|
||||||
<div className="flexbox-area-grow cms-content__right preview">
|
<div className="flexbox-area-grow fill-height cms-content__right preview">
|
||||||
{body}
|
{body}
|
||||||
<a href="" className="cms-content__back-btn font-icon-left-open-big" />
|
<a href="" className="cms-content__back-btn font-icon-left-open-big" />
|
||||||
<div className="toolbar toolbar--south">
|
<div className="toolbar toolbar--south">
|
||||||
|
@ -1,7 +1,24 @@
|
|||||||
.preview__iframe {
|
.preview {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
// Overlay preview at smaller sizes
|
||||||
|
@include media-breakpoint-down(md) {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
z-index: 2;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview__iframe {
|
||||||
height: calc(100% - #{$toolbar-total-height});
|
height: calc(100% - #{$toolbar-total-height});
|
||||||
|
width: 100%;
|
||||||
border: 0;
|
border: 0;
|
||||||
|
display: block;
|
||||||
|
|
||||||
|
@include media-breakpoint-down(md) {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.preview__file-container {
|
.preview__file-container {
|
||||||
|
@ -71,6 +71,7 @@
|
|||||||
padding-bottom: $spacer-xs;
|
padding-bottom: $spacer-xs;
|
||||||
border-top: 1px solid $border-color;
|
border-top: 1px solid $border-color;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
background-color: $background-main;
|
||||||
}
|
}
|
||||||
|
|
||||||
.toolbar__back-button,
|
.toolbar__back-button,
|
||||||
|
@ -150,8 +150,8 @@ class CampaignAdminList extends SilverStripeComponent {
|
|||||||
];
|
];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="fill-width cms-content__split--left-sm">
|
<div className="fill-width campaigns">
|
||||||
<div className="fill-height cms-content__left cms-campaigns" aria-expanded="true">
|
<div className="fill-height campaign-items cms-content__left cms-campaigns" aria-expanded="true">
|
||||||
<Toolbar showBackButton handleBackButtonClick={this.props.handleBackButtonClick}>
|
<Toolbar showBackButton handleBackButtonClick={this.props.handleBackButtonClick}>
|
||||||
<BreadcrumbComponent multiline crumbs={this.props.breadcrumbs} />
|
<BreadcrumbComponent multiline crumbs={this.props.breadcrumbs} />
|
||||||
</Toolbar>
|
</Toolbar>
|
||||||
|
@ -16,16 +16,16 @@
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cms-content__split--left-sm {
|
.campaign-items {
|
||||||
.cms-content__right {
|
@include media-breakpoint-down(md) {
|
||||||
display: none;
|
width: 100%;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.cms-content__left {
|
.campaigns {
|
||||||
width: 100%;
|
position: relative;
|
||||||
// position: absolute;
|
height: 100%;
|
||||||
// left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Overlay preview if there isn't enough space for both items and preview
|
// Overlay preview if there isn't enough space for both items and preview
|
||||||
.cms-content--selected {
|
.cms-content--selected {
|
||||||
@ -168,7 +168,7 @@ html, body {
|
|||||||
// Nested items take up width
|
// Nested items take up width
|
||||||
.fill-width {
|
.fill-width {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
// height: 100%;
|
||||||
display: -ms-flexbox;
|
display: -ms-flexbox;
|
||||||
display: flex;
|
display: flex;
|
||||||
-ms-flex-direction: row;
|
-ms-flex-direction: row;
|
||||||
|
Loading…
Reference in New Issue
Block a user