mirror of
https://github.com/silverstripe/silverstripe-framework
synced 2024-09-29 20:59:23 +02:00
Add flex classes, remove layout classes
This commit is contained in:
Paul Clarke
Damian Mooyman
parent
1b0839a8e8
commit
8dd56efe2e
68
admin/client/dist/styles/bundle.css
vendored
68
admin/client/dist/styles/bundle.css
vendored
@ -10512,9 +10512,7 @@ form.member-profile-form #Permissions .optionset li{
|
||||
.cms .cms-content{
|
||||
border-radius:0;
|
||||
background:#f6f7f8;
|
||||
width:800px;
|
||||
z-index:40;
|
||||
overflow:hidden !important;
|
||||
}
|
||||
|
||||
.cms .cms-content-fields{
|
||||
@ -16034,6 +16032,72 @@ input.checkbox,input.radio,input[type=checkbox],input[type=radio]{
|
||||
box-shadow:0 16px 28px 0 rgba(0,0,0,.3),0 25px 55px 0 rgba(0,0,0,.3);
|
||||
}
|
||||
|
||||
*,:after,:before{
|
||||
box-sizing:border-box;
|
||||
}
|
||||
|
||||
body,html{
|
||||
width:100%;
|
||||
height:100%;
|
||||
padding:0;
|
||||
font-size:13px;
|
||||
display:-ms-flexbox;
|
||||
display:-webkit-box;
|
||||
display:flex;
|
||||
}
|
||||
|
||||
body,h1,html{
|
||||
margin:0;
|
||||
line-height:20px;
|
||||
}
|
||||
|
||||
h1{
|
||||
font-size:18px;
|
||||
}
|
||||
|
||||
.cms-menu{
|
||||
position:relative;
|
||||
}
|
||||
|
||||
.cms-preview{
|
||||
display:none;
|
||||
}
|
||||
|
||||
.toolbar--north,.toolbar--south{
|
||||
height:52px;
|
||||
}
|
||||
|
||||
.panel--scrollable{
|
||||
overflow:auto;
|
||||
}
|
||||
|
||||
.fill-height{
|
||||
height:100%;
|
||||
-ms-flex-direction:column;
|
||||
-webkit-box-orient:vertical;
|
||||
flex-direction:column;
|
||||
}
|
||||
|
||||
.fill-height,.fill-width{
|
||||
display:-ms-flexbox;
|
||||
display:-webkit-box;
|
||||
display:flex;
|
||||
-webkit-box-direction:normal;
|
||||
}
|
||||
|
||||
.fill-width{
|
||||
width:100%;
|
||||
-ms-flex-direction:row;
|
||||
-webkit-box-orient:horizontal;
|
||||
flex-direction:row;
|
||||
}
|
||||
|
||||
.flexbox-area-grow{
|
||||
-ms-flex:1;
|
||||
-webkit-box-flex:1;
|
||||
flex:1;
|
||||
}
|
||||
|
||||
.campaign-admin__item-links--has-links,.campaign-admin__item-links--is-linked{
|
||||
color:#29abe2;
|
||||
float:right;
|
||||
|
||||
@ -135,3 +135,80 @@
|
||||
.z-depth-4 {
|
||||
box-shadow: $z-depth-4;
|
||||
}
|
||||
|
||||
|
||||
// TEST FLEXBOX
|
||||
// Reference https://css-tricks.com/boxes-fill-height-dont-squish/
|
||||
// Tested in IE10 & IE11
|
||||
|
||||
*, *:before, *:after {
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 13px;
|
||||
line-height: 20px;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 18px;
|
||||
line-height: 20px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.cms-menu {
|
||||
// width: 150px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.cms-content { }
|
||||
|
||||
|
||||
.cms-preview {
|
||||
display: none;
|
||||
// width: 150px;
|
||||
}
|
||||
|
||||
.toolbar--north,
|
||||
.toolbar--south {
|
||||
height: 52px;
|
||||
}
|
||||
|
||||
// Scrollable area
|
||||
.panel--scrollable {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
// Flex magic
|
||||
|
||||
// Nested items take up height
|
||||
.fill-height {
|
||||
height: 100%;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
// Nested items take up width
|
||||
.fill-width {
|
||||
width: 100%;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row; // Default
|
||||
}
|
||||
|
||||
// Item to take up available space
|
||||
.flexbox-area-grow {
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
@ -1409,9 +1409,7 @@ form.member-profile-form {
|
||||
.cms-content {
|
||||
border-radius: 0;
|
||||
background: $tab-panel-texture-color;
|
||||
width: 800px;
|
||||
z-index: 40;
|
||||
overflow: hidden !important; // TEMP until JS is removed
|
||||
}
|
||||
|
||||
.cms-content-fields {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<div id="settings-controller-cms-content" class="cms-content center cms-tabset $BaseCSSClasses" data-layout-type="border" data-pjax-fragment="Content">
|
||||
<div id="settings-controller-cms-content" class="cms-content center cms-tabset flexbox-area-grow fill-height $BaseCSSClasses" data-layout-type="border" data-pjax-fragment="Content">
|
||||
|
||||
<div class="cms-content-header north">
|
||||
<% with $EditForm %>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<div class="cms-menu cms-panel cms-panel-layout west" id="cms-menu" data-layout-type="border">
|
||||
<div class="cms-menu cms-panel cms-panel-layout" id="cms-menu" data-layout-type="border">
|
||||
<div class="cms-logo-header north">
|
||||
<% include SilverStripe\\Admin\\LeftAndMain_MenuLogo %>
|
||||
<% include SilverStripe\\Admin\\LeftAndMain_MenuStatus %>
|
||||
</div>
|
||||
|
||||
<div class="panel panel--scrollable panel--triple-toolbar cms-panel-content">
|
||||
<div class="panel--scrollable panel--triple-toolbar cms-panel-content">
|
||||
<% include SilverStripe\\Admin\\LeftAndMain_MenuList %>
|
||||
</div>
|
||||
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
>
|
||||
<% include SilverStripe\\Admin\\CMSLoadingScreen %>
|
||||
|
||||
<div class="cms-container center" data-layout-type="custom">
|
||||
<div class="cms-container center fill-width" data-layout-type="custom">
|
||||
$Menu
|
||||
$Content
|
||||
$PreviewPanel
|
||||
|
||||
Loading…
Reference in New Issue
Block a user