mirror of
https://github.com/silverstripe/silverstripe-framework
synced 2024-09-29 20:59:23 +02:00
Replace jLayout classes with flexbox CSS classes
This commit is contained in:
Paul Clarke
Damian Mooyman
parent
1fd46ed36d
commit
e7829eb974
83
admin/client/dist/styles/bundle.css
vendored
83
admin/client/dist/styles/bundle.css
vendored
@ -9497,6 +9497,10 @@ body.cms{
|
||||
height:26px;
|
||||
}
|
||||
|
||||
.cms-content-tools.collapsed .cms-panel-content>*{
|
||||
display:none;
|
||||
}
|
||||
|
||||
.cms-versions-form .form-group:after{
|
||||
visibility:hidden;
|
||||
margin:0;
|
||||
@ -9950,7 +9954,7 @@ body.cms{
|
||||
top:80%;
|
||||
}
|
||||
|
||||
.cms-content-actions,.cms-preview-controls{
|
||||
.cms-content-actions{
|
||||
margin:0;
|
||||
z-index:999;
|
||||
border-top:1px solid #d9dee2;
|
||||
@ -9961,7 +9965,7 @@ body.cms{
|
||||
padding:.76925rem 0;
|
||||
}
|
||||
|
||||
.cms-content-actions.south .btn-toolbar,.cms-preview-controls.south .btn-toolbar{
|
||||
.cms-content-actions.south .btn-toolbar{
|
||||
margin-top:0;
|
||||
margin-bottom:0;
|
||||
}
|
||||
@ -10502,9 +10506,6 @@ form.member-profile-form #Permissions .optionset li{
|
||||
|
||||
.cms .cms-content-fields{
|
||||
overflow-y:auto;
|
||||
overflow-x:auto;
|
||||
background:#f6f7f8;
|
||||
width:100%;
|
||||
}
|
||||
|
||||
.cms .cms-content-fields #Root_Main .confirmedpassword{
|
||||
@ -10548,14 +10549,10 @@ form.member-profile-form #Permissions .optionset li{
|
||||
}
|
||||
|
||||
.cms-panel .cms-panel-toggle .toggle-collapse,.cms-panel .cms-panel-toggle .toggle-expand{
|
||||
display:block;
|
||||
position:absolute;
|
||||
text-align:right;
|
||||
padding:14px 0;
|
||||
width:100%;
|
||||
text-decoration:none;
|
||||
line-height:20px;
|
||||
height:52px;
|
||||
margin:-.76925rem -1.5385rem;
|
||||
}
|
||||
|
||||
@ -10566,7 +10563,11 @@ form.member-profile-form #Permissions .optionset li{
|
||||
font-size:16px;
|
||||
}
|
||||
|
||||
.cms-panel .cms-panel-toggle .toggle-collapse.toggle-expand,.cms-panel .cms-panel-toggle .toggle-expand.toggle-expand{
|
||||
.cms-panel .cms-panel-toggle .toggle-collapse{
|
||||
display:block;
|
||||
}
|
||||
|
||||
.cms-panel .cms-panel-toggle .toggle-expand{
|
||||
width:60px;
|
||||
display:none;
|
||||
}
|
||||
@ -10575,12 +10576,13 @@ form.member-profile-form #Permissions .optionset li{
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
.cms-panel.collapsed .cms-panel-content>*,.cms-panel.collapsed .cms-panel-header *,.cms-panel.collapsed .cms-panel-toggle a.toggle-collapse{
|
||||
.cms-panel.collapsed .cms-panel-header *,.cms-panel.collapsed .cms-panel-toggle a.toggle-collapse{
|
||||
display:none;
|
||||
}
|
||||
|
||||
.cms-panel.collapsed .cms-panel-toggle a.toggle-expand{
|
||||
display:block;
|
||||
width:auto;
|
||||
}
|
||||
|
||||
.cms-panel .cms-panel-header{
|
||||
@ -10642,6 +10644,9 @@ form.member-profile-form #Permissions .optionset li{
|
||||
.cms .ui-widget-overlay-light{
|
||||
background:#aaa url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAABkCAYAAAD0ZHJ6AAAAe0lEQVRoge3OMQHAIBAAMcC/kjdZJHTI0A4XBdkz86wfO18H3hRUBVVBVVAVVAVVQVVQFVQFVUFVUBVUBVVBVVAVVAVVQVVQFVQFVUFVUBVUBVVBVVAVVAVVQVVQFVQFVUFVUBVUBVVBVVAVVAVVQVVQFVQFVUFVUBVUF8O8A8WdY6opAAAAAElFTkSuQmCC) 50% 50% repeat-x;
|
||||
opacity:.3;
|
||||
position:absolute;
|
||||
z-index:2;
|
||||
display:none;
|
||||
}
|
||||
|
||||
.cms .ui-widget-overlay{
|
||||
@ -12309,11 +12314,6 @@ li.class-ErrorPage>a .jstree-pageicon{
|
||||
margin-top:-33px;
|
||||
}
|
||||
|
||||
.cms-content-controls.cms-preview-controls,.toolbar--south.cms-preview-controls{
|
||||
z-index:1;
|
||||
background:#f6f7f8;
|
||||
}
|
||||
|
||||
.cms-content-controls .icon-view,.cms-content-controls .preview-selector.dropdown a.chosen-single,.toolbar--south .icon-view,.toolbar--south .preview-selector.dropdown a.chosen-single{
|
||||
white-space:nowrap;
|
||||
}
|
||||
@ -12326,12 +12326,6 @@ li.class-ErrorPage>a .jstree-pageicon{
|
||||
color:#1f1f1f;
|
||||
}
|
||||
|
||||
.cms-content-controls .cms-navigator,.toolbar--south .cms-navigator{
|
||||
width:100%;
|
||||
padding:1px 12px;
|
||||
height:52px;
|
||||
}
|
||||
|
||||
.cms-content-controls .preview-selector,.toolbar--south .preview-selector{
|
||||
float:right;
|
||||
border-bottom:none;
|
||||
@ -12549,9 +12543,9 @@ li.class-ErrorPage>a .jstree-pageicon{
|
||||
border-left:1px solid #ced3d9;
|
||||
}
|
||||
|
||||
.cms-preview,.cms-preview .cms-preview-overlay{
|
||||
height:100%;
|
||||
.cms-preview .cms-preview-overlay{
|
||||
width:100%;
|
||||
height:100%;
|
||||
}
|
||||
|
||||
.cms-preview .preview-note{
|
||||
@ -15388,6 +15382,7 @@ div.grid-field__sort-field+.form__fieldgroup-item{
|
||||
padding-right:1.5385rem;
|
||||
height:53px;
|
||||
background-color:#f6f7f8;
|
||||
width:100%;
|
||||
}
|
||||
|
||||
.toolbar--content .btn-toolbar,.toolbar--north .btn-toolbar,.toolbar--south .btn-toolbar,.toolbar .btn-toolbar{
|
||||
@ -15439,7 +15434,6 @@ div.grid-field__sort-field+.form__fieldgroup-item{
|
||||
.toolbar--south{
|
||||
padding-top:.76925rem;
|
||||
padding-bottom:.76925rem;
|
||||
bottom:0;
|
||||
border-top:1px solid #d9dee2;
|
||||
width:100%;
|
||||
}
|
||||
@ -15977,6 +15971,7 @@ input.checkbox,input.radio,input[type=checkbox],input[type=radio]{
|
||||
.panel{
|
||||
margin-left:auto;
|
||||
margin-right:auto;
|
||||
width:100%;
|
||||
}
|
||||
|
||||
.panel--padded{
|
||||
@ -16021,51 +16016,32 @@ input.checkbox,input.radio,input[type=checkbox],input[type=radio]{
|
||||
|
||||
body,html{
|
||||
width:100%;
|
||||
height:100%;
|
||||
margin:0;
|
||||
padding:0;
|
||||
font-size:13px;
|
||||
}
|
||||
|
||||
.fill-height,body,html{
|
||||
height:100%;
|
||||
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;
|
||||
}
|
||||
|
||||
.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%;
|
||||
display:-ms-flexbox;
|
||||
display:-webkit-box;
|
||||
display:flex;
|
||||
-ms-flex-direction:row;
|
||||
-webkit-box-orient:horizontal;
|
||||
flex-direction:row;
|
||||
@ -16075,9 +16051,6 @@ h1{
|
||||
-ms-flex:1;
|
||||
-webkit-box-flex:1;
|
||||
flex:1;
|
||||
display:-webkit-box;
|
||||
display:-ms-flexbox;
|
||||
display:flex;
|
||||
}
|
||||
|
||||
.campaign-admin__item-links--has-links,.campaign-admin__item-links--is-linked{
|
||||
|
||||
@ -5,6 +5,7 @@
|
||||
@include make-container();
|
||||
height: $toolbar-total-height;
|
||||
background-color: $body-bg;
|
||||
width: 100%;
|
||||
|
||||
.btn-toolbar {
|
||||
// TODO Remove '.cms .btn-toolbar' override
|
||||
@ -68,7 +69,6 @@
|
||||
.toolbar--south {
|
||||
padding-top: $spacer-xs;
|
||||
padding-bottom: $spacer-xs;
|
||||
bottom: 0;
|
||||
border-top: 1px solid $border-color;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@ -90,6 +90,7 @@
|
||||
.panel {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.panel--padded {
|
||||
@ -136,9 +137,9 @@
|
||||
}
|
||||
|
||||
|
||||
// TEST FLEXBOX
|
||||
// TEMPORY FLEXBOX STYLES
|
||||
// Reference https://css-tricks.com/boxes-fill-height-dont-squish/
|
||||
// Tested in IE10 & IE11
|
||||
// Reference http://codepen.io/clarkepaul/pen/qaNWAY
|
||||
|
||||
*, *:before, *:after {
|
||||
-moz-box-sizing: border-box;
|
||||
@ -151,39 +152,11 @@ html, body {
|
||||
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;
|
||||
}
|
||||
|
||||
|
||||
// Scrollable area
|
||||
.panel--scrollable {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
// Flex magic
|
||||
|
||||
// Nested items take up height
|
||||
.fill-height {
|
||||
height: 100%;
|
||||
@ -206,5 +179,4 @@ h1 {
|
||||
.flexbox-area-grow {
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
display: flex; // Only required for divs already positioned block as override
|
||||
}
|
||||
|
||||
@ -14,6 +14,10 @@ form.nostyle {
|
||||
@include clear-form-field-styles();
|
||||
}
|
||||
|
||||
// fieldset {
|
||||
// width: 100%;
|
||||
// }
|
||||
|
||||
.field { // TODO convert to .form-group
|
||||
|
||||
&.ui-tabs {
|
||||
|
||||
@ -3,12 +3,6 @@
|
||||
.cms-content-controls,
|
||||
.toolbar--south {
|
||||
|
||||
/* Styling the background, controls sit on */
|
||||
&.cms-preview-controls {
|
||||
z-index: 1;
|
||||
background: $tab-panel-texture-color;
|
||||
}
|
||||
|
||||
/* Styling for icons in controls */
|
||||
.icon-view, .preview-selector.dropdown a.chosen-single {
|
||||
white-space: nowrap;
|
||||
@ -21,12 +15,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.cms-navigator{
|
||||
width: 100%;
|
||||
padding: 1px $grid-y*1.5;
|
||||
height: 52px; /* should be set in js Layout to match page actions */
|
||||
}
|
||||
|
||||
/* Preview selectors. Overrides default chosen styles and applies its own */
|
||||
.preview-selector {
|
||||
float:right;
|
||||
@ -245,8 +233,6 @@
|
||||
.cms-preview {
|
||||
background-color: $tab-panel-texture-color;
|
||||
border-left: 1px solid $border-color-dark;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
.cms-preview-overlay {
|
||||
width: 100%;
|
||||
|
||||
@ -225,6 +225,10 @@ body.cms {
|
||||
}
|
||||
}
|
||||
|
||||
.cms-content-tools.collapsed .cms-panel-content > * {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// History checkboxes
|
||||
.cms-versions-form {
|
||||
.form-group::after {
|
||||
@ -462,6 +466,7 @@ body.cms {
|
||||
|
||||
&.cms-edit-form {
|
||||
padding: 0;
|
||||
display: flex; // TODO remove once JQueryUI is removed
|
||||
}
|
||||
|
||||
.ui-tabs .ui-tabs-nav {
|
||||
@ -762,7 +767,7 @@ body.cms {
|
||||
* Actions
|
||||
* -------------------------------------------- */
|
||||
|
||||
.cms-content-actions, .cms-preview-controls {
|
||||
.cms-content-actions {
|
||||
margin: 0;
|
||||
z-index: 999;
|
||||
border-top: 1px solid $border-color;
|
||||
@ -1401,9 +1406,6 @@ form.member-profile-form {
|
||||
// always show a y scroll bar as popups like TreeDropdowns
|
||||
// can trigger longer pages and the extra scroll bar doesn't fire our sizing bar
|
||||
overflow-y: auto;
|
||||
overflow-x: auto;
|
||||
background: $tab-panel-texture-color;
|
||||
width: 100%;
|
||||
|
||||
#Root_Main {
|
||||
.confirmedpassword {
|
||||
@ -1472,17 +1474,13 @@ form.member-profile-form {
|
||||
.cms-panel {
|
||||
.cms-panel-toggle {
|
||||
|
||||
.toggle-collapse,
|
||||
.toggle-expand {
|
||||
display: block;
|
||||
position: absolute;
|
||||
text-align: right;
|
||||
padding: 14px 0;
|
||||
width: 100%;
|
||||
text-decoration: none;
|
||||
line-height: 20px;
|
||||
height: 52px;
|
||||
margin: -#{$spacer-xs} #{0 - $panel-padding-x};
|
||||
.toggle-collapse,
|
||||
.toggle-expand {
|
||||
text-align: right;
|
||||
padding: 14px 0;
|
||||
text-decoration: none;
|
||||
line-height: 20px;
|
||||
margin: -#{$spacer-xs} #{0 - $panel-padding-x};
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
@ -1490,11 +1488,15 @@ form.member-profile-form {
|
||||
color: #555d60;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
&.toggle-expand {
|
||||
width: 60px; // will set the collapsed width
|
||||
display: none;
|
||||
}
|
||||
.toggle-collapse {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.toggle-expand {
|
||||
width: 60px; // will set the collapsed width
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1506,12 +1508,9 @@ form.member-profile-form {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cms-panel-content > * {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cms-panel-toggle a.toggle-expand {
|
||||
display: block;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1583,6 +1582,9 @@ form.member-profile-form {
|
||||
.cms .ui-widget-overlay-light {
|
||||
background: #aaaaaa url(../../../thirdparty/jquery-ui-themes/smoothness/images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x;
|
||||
opacity: 0.3;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Adjusting the color of the background overlay to be darker for pop-up dialogs (created by jQuery-UI)
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<div id="settings-controller-cms-content" class="cms-content cms-tabset flexbox-area-grow fill-height $BaseCSSClasses" data-layout-type="border" data-pjax-fragment="Content">
|
||||
|
||||
<div class="cms-content-header north">
|
||||
<div class="cms-content-header">
|
||||
<% with $EditForm %>
|
||||
<div class="cms-content-header-info">
|
||||
<% with $Controller %>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user