mirror of
https://github.com/silverstripe/silverstripe-framework
synced 2024-10-22 14:05:37 +02:00
74454a7557
Panel adjustments to south and site tree collapsed so that everything aligns. Start of bootstrap tab styles Fix for pages batch action alignment issue
2250 lines
41 KiB
SCSS
2250 lines
41 KiB
SCSS
/**
|
|
* This file defines most styles of the CMS: Colors, fonts, backgrounds,
|
|
* alignments, dimensions.
|
|
*
|
|
* Use SCSS variable definitions in screen.css to avoid repeating styles
|
|
* like background colours or padding dimensions. See themes/_default.scss
|
|
* to get started.
|
|
*
|
|
* To avoid this file getting too large and complicated, it is encouraged to
|
|
* create new SCSS files for larger components like the CMS menu or tree
|
|
* (see _tree.scss and _menu.scss).
|
|
*/
|
|
|
|
/** ----------------------------------------------------
|
|
* Core Styles.
|
|
* ---------------------------------------------------- */
|
|
|
|
html,body {
|
|
width: 100%;
|
|
height: 100%;
|
|
/* Removes RHS whitespace on iPad */
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
body.cms {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.cms {
|
|
a {
|
|
color: $color-text-blue-link;
|
|
text-decoration: none;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
strong {
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
/** --------------------------------------------
|
|
* Helpers
|
|
* -------------------------------------------- */
|
|
|
|
.hide {
|
|
display: none;
|
|
}
|
|
|
|
.cms-helper-hide-actions {
|
|
.Actions {
|
|
@extend .hide;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/** --------------------------------------------
|
|
* Panels Styles
|
|
* -------------------------------------------- */
|
|
.cms-container {
|
|
height: 100%;
|
|
background: $tab-panel-texture-color;
|
|
}
|
|
|
|
.cms-preview,
|
|
.cms-menu,
|
|
.cms-content,
|
|
.cms-content-header,
|
|
/**
|
|
* DEPRECATED:
|
|
* .cms-content-tools will be removed in 4.0
|
|
* Use .cms-content-filters instead.
|
|
*/
|
|
.cms-content-tools,
|
|
.cms-content-fields,
|
|
.cms-edit-form,
|
|
.cms-preview,
|
|
.cms-preview iframe,
|
|
.cms-preview-controls
|
|
{
|
|
display: inline-block;
|
|
}
|
|
|
|
.cms-content-header {
|
|
z-index: 60;
|
|
min-height: 52px;
|
|
background: {
|
|
image: url(../images/textures/cms_content_header.png);
|
|
repeat: repeat;
|
|
position: left bottom;
|
|
color: $color-darker-bg;
|
|
}
|
|
|
|
a {
|
|
color: $color-text-blue-link;
|
|
}
|
|
|
|
.backlink {
|
|
span.btn-icon-back {
|
|
height:16px;
|
|
}
|
|
}
|
|
|
|
h2 {
|
|
font-size: $font-size-h4;
|
|
font-weight: bold;
|
|
margin: 0;
|
|
margin-bottom: $grid-x;
|
|
|
|
* {
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
|
|
.cms-content-header-info {
|
|
float:left;
|
|
padding-top: $grid-y - 1;
|
|
padding-left: $grid-x * 2;
|
|
|
|
& * {
|
|
display: inline-block; // align back button and breadcrumbs
|
|
}
|
|
|
|
.section-icon {
|
|
opacity: 0.2;
|
|
margin-right: 4px;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.cms_backlink {
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
|
|
// Reset to default styles
|
|
.ss-ui-button {
|
|
line-height: $grid-x*3;
|
|
|
|
.ui-button-text {
|
|
line-height: 1.4;
|
|
}
|
|
}
|
|
}
|
|
|
|
.cms-edit-form.CMSMain {
|
|
padding: 0;
|
|
}
|
|
|
|
// Hide threeColumnCompressor column.
|
|
.cms-container {
|
|
.column-hidden {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.cms-content-header-top {
|
|
display: inline-block;
|
|
width: 100%;
|
|
}
|
|
|
|
// We have a faux three column layout when displaying Page content in the CMS.
|
|
.has-panel {
|
|
.cms-tree-view-sidebar,
|
|
.cms-versions-form {
|
|
padding: 0 $grid-x*1.5 $grid-y*1.5 $grid-x*2;
|
|
}
|
|
|
|
.cms-content-header.north {
|
|
&.collapsed {
|
|
.cms-content-header-info {
|
|
width: 60px;
|
|
text-align: center;
|
|
padding-left: 8px;
|
|
padding-right: 8px;
|
|
}
|
|
|
|
.view-controls,
|
|
.section-label {
|
|
display: none;
|
|
}
|
|
|
|
.cms-content-header-nav {
|
|
margin-left: 61px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.cms-content-header-info {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 1px;
|
|
width: 300px;
|
|
padding-bottom: $grid-y;
|
|
padding-left: $grid-x * 2;
|
|
padding-right: $grid-x*2;
|
|
box-shadow: 1px 0 0 0 $color-separator;
|
|
}
|
|
|
|
.cms-content-header-nav {
|
|
margin-left: 300px;
|
|
}
|
|
|
|
.section-heading {
|
|
margin-top: 8px;
|
|
padding-left: 4px;
|
|
}
|
|
|
|
.section-icon {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.section-label {
|
|
vertical-align: middle;
|
|
font-size: 1.2em;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.breadcrumbs-wrapper {
|
|
float: left;
|
|
padding-top: $grid-y - 1;
|
|
padding-left: $grid-x*2;
|
|
}
|
|
|
|
.cms-content-header-tabs {
|
|
margin-top: $grid-y;
|
|
}
|
|
|
|
.view-controls {
|
|
float: right;
|
|
margin-top: 4px;
|
|
|
|
.icon-button-group {
|
|
.icon-button {
|
|
padding: 6px 8px;
|
|
height: 26px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.cms-content-tools {
|
|
.cms-panel-content {
|
|
padding-top: 0;
|
|
overflow-x: hidden;
|
|
}
|
|
}
|
|
}
|
|
|
|
#page-title-heading {
|
|
line-height: 1.2em;
|
|
}
|
|
|
|
/** ------------------------------------------------------------------
|
|
* CMS Breadcrumbs
|
|
* ----------------------------------------------------------------- */
|
|
.breadcrumbs-wrapper {
|
|
.crumb,
|
|
.sep {
|
|
font-size: .8em;
|
|
line-height: 1.2em;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.crumb {
|
|
&.last {
|
|
display: block;
|
|
padding: 8px 0;
|
|
font-size: 1.2em;
|
|
}
|
|
}
|
|
|
|
.sep {
|
|
+ .crumb.last {
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
/** ------------------------------------------------------------------
|
|
* Filters available in the top bar.
|
|
* This is a togglable element that displays a form
|
|
* used for filtering content.
|
|
* ----------------------------------------------------------------- */
|
|
.cms-content-filters {
|
|
display: none;
|
|
width: 100%;
|
|
padding: 12px 16px;
|
|
border-bottom: 1px solid $color-light-separator;
|
|
|
|
.cms-search-form {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.cms-tabset-nav-primary {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
/** ------------------------------------------------------------------
|
|
* Buttons that use font icons.
|
|
* There are !important rules here because we need to override some Tab styling.
|
|
* It's tidier to have some !important rules here than have the Tab styles
|
|
* littered with load of context specific rules for icon-buttons.
|
|
* Icon buttons styles should always take presedence over Tab styles.
|
|
* Tabs should be refactored to use weaker selectors.
|
|
* ----------------------------------------------------------------- */
|
|
.cms {
|
|
a.icon-button,
|
|
button.ss-ui-button.icon-button {
|
|
vertical-align: middle;
|
|
margin: 0 2px 0 0;
|
|
padding: 5px 8px;
|
|
font-size: 14px;
|
|
text-indent: 0;
|
|
text-shadow: none;
|
|
line-height: 1em;
|
|
color: $color-text;
|
|
background-color: transparent;
|
|
background-image: none;
|
|
border: 0;
|
|
|
|
&:hover,
|
|
&:active,
|
|
&:focus {
|
|
border: 0;
|
|
box-shadow: none;
|
|
background-image: none;
|
|
text-decoration: none;
|
|
}
|
|
|
|
&:hover {
|
|
background-color: #d4dbe1;
|
|
}
|
|
|
|
&.active,
|
|
&:active {
|
|
background-color: #d4dbe1;
|
|
}
|
|
|
|
&.font-icon-search {
|
|
padding: 5px 6px;
|
|
color:lighten($color-text, 10%);
|
|
|
|
&.active,
|
|
&:active,
|
|
&:focus,
|
|
&:hover {
|
|
background: none;
|
|
box-shadow: none;
|
|
color: darken($color-text, 10%);
|
|
}
|
|
|
|
|
|
&:before {
|
|
font-size: 18px;
|
|
margin-left: 1px;
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
.ui-button-text {
|
|
display: none;
|
|
}
|
|
|
|
.ModelAdmin & {
|
|
margin-top: -11px;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Context specific overrides for Tabs.
|
|
.ui-tabs.ui-tabs-nav li.cms-tabset-icon.ui-corner-top.ui-state-active a.icon-button.cms-panel-link,
|
|
.ui-tabs.ui-tabs-nav li.cms-tabset-icon.ui-corner-top.ui-state-default a.icon-button.cms-panel-link {
|
|
padding: 5px 8px 6px;
|
|
line-height: 1em;
|
|
background-color: transparent;
|
|
background-image: none;
|
|
border: 0;
|
|
|
|
&:before {
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
|
|
.icon-button-group {
|
|
display: inline-block;
|
|
margin-top: 1px;
|
|
vertical-align: middle;
|
|
border: 1px solid #CDCCD0;
|
|
border-radius: 4px;
|
|
|
|
a.icon-button,
|
|
button.ss-ui-button.icon-button {
|
|
margin-right: 0;
|
|
line-height: 13px;
|
|
border-radius: 0;
|
|
|
|
&:first-child {
|
|
border-radius: 3px 0 0 3px;
|
|
}
|
|
|
|
&:last-child {
|
|
border-radius: 0 3px 3px 0;
|
|
}
|
|
|
|
&:hover {
|
|
background: $tab-panel-texture-color;
|
|
}
|
|
|
|
&.active:hover {
|
|
background: #d4dbe1;
|
|
}
|
|
|
|
+ a.icon-button,
|
|
+ button.ss-ui-button.icon-button {
|
|
border-left: 1px solid #CDCCD0;
|
|
}
|
|
|
|
&.font-icon-thumbnails {
|
|
&::before {
|
|
margin-left: -2px;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Context specific overrides for Tabs.
|
|
.ui-tabs.ui-tabs-nav {
|
|
border-left: 0 !important;
|
|
padding-right: 0 !important;
|
|
margin-bottom: 0;
|
|
overflow: hidden;
|
|
|
|
.cms-tabset-icon.ui-state-default {
|
|
background-color: transparent;
|
|
background-image: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
border-left: 0;
|
|
border-right: 0;
|
|
box-shadow: none;
|
|
|
|
+ .cms-tabset-icon.ui-state-default {
|
|
border-left: 1px solid #CDCCD0;
|
|
}
|
|
|
|
&:hover {
|
|
background: $tab-panel-texture-color;
|
|
}
|
|
|
|
&.ui-state-active:hover {
|
|
background: #d4dbe1;
|
|
}
|
|
}
|
|
|
|
.cms-tabset-icon.ui-state-active {
|
|
background-color: #d4dbe1;
|
|
}
|
|
}
|
|
|
|
.cms-content-header-tabs & {
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
/** --------------------------------------------
|
|
* Tabs
|
|
* -------------------------------------------- */
|
|
|
|
.ui-tabs {
|
|
padding: 0;
|
|
background: none;
|
|
|
|
.ui-tabs {
|
|
position: static;
|
|
}
|
|
|
|
.ui-tabs-panel {
|
|
padding: $grid-y*1.5 $grid-x*2;
|
|
background: transparent; // default it's white
|
|
border: 0; // suppress default borders
|
|
|
|
&.cms-edit-form {
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
.ui-widget-header {
|
|
border: 0;
|
|
background: none;
|
|
}
|
|
|
|
.ui-tabs-nav {
|
|
float: right;
|
|
margin: $grid-x*2 0 -1px 0;
|
|
padding: 0 $grid-x*2 0 0;
|
|
border-bottom: 0;
|
|
|
|
~ .ui-tabs-panel {
|
|
clear: both;
|
|
}
|
|
|
|
li {
|
|
top: 0;
|
|
float: left;
|
|
margin-top: 0;
|
|
|
|
&:active {
|
|
outline: none;
|
|
}
|
|
|
|
a {
|
|
display: inline-block;
|
|
outline: none;
|
|
float: none;
|
|
font-weight: normal;
|
|
color: $color-text;
|
|
line-height: $grid-y * 4;
|
|
padding: 0 $grid-x*1.5 0;
|
|
|
|
&.icon-button {
|
|
@extend a.icon-button;
|
|
}
|
|
}
|
|
|
|
&:last-child {
|
|
// correctly right-align last tab
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
.ui-state-default {
|
|
border: 0;
|
|
background: transparent;
|
|
|
|
a {
|
|
line-height: 28px;
|
|
padding-top: 12px;
|
|
padding-bottom: 8px;
|
|
color: lighten($color-text, 10%);
|
|
|
|
&:hover {
|
|
color: $color-text;
|
|
}
|
|
}
|
|
}
|
|
|
|
.ui-state-active {
|
|
padding-bottom: 1px;
|
|
background-color: transparent;
|
|
cursor: text;
|
|
|
|
a {
|
|
border-bottom: 3px solid #66727d;
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
margin: 0 12px 0;
|
|
color: $color-text;
|
|
}
|
|
}
|
|
|
|
&.ui-state-active {
|
|
border-color: $color-medium-separator;
|
|
}
|
|
|
|
li.cms-tabset-icon.ui-corner-top {
|
|
text-indent:-9999em;
|
|
|
|
a {
|
|
display: block;
|
|
padding-left: 40px; // icon width
|
|
padding-right: 0;
|
|
margin: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.cms-panel-padded {
|
|
.ui-tabs-panel {
|
|
padding: 0; // Avoid double padding with parent
|
|
|
|
.ui-tabs-panel {
|
|
padding: $grid-x 0 0 0;
|
|
}
|
|
}
|
|
|
|
.Actions {
|
|
padding: 0; // Avoid double padding with parent
|
|
}
|
|
}
|
|
|
|
&.ss-tabset-tabshidden .ui-tabs-panel {
|
|
border-top: none;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* SilverStripe 4 tabs.
|
|
* Tab styles built on top of Bootstrap 4 tab functionality
|
|
*/
|
|
|
|
.nav-tabs {
|
|
margin-bottom: 20px;
|
|
|
|
.nav-item {
|
|
|
|
}
|
|
|
|
.nav-link {
|
|
margin-right: 4px;
|
|
color: $body-color-light;
|
|
|
|
&:hover {
|
|
text-decoration: none;
|
|
background: transparent;
|
|
}
|
|
|
|
&.active,
|
|
&.active:hover {
|
|
border-bottom: 2px solid $body-color;
|
|
color: $body-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Primary styles which sit on top of screen, with different tab colors.
|
|
* TODO Only use one "primary" selector and fix HTMLEditorField TabSet addExtraClass()
|
|
*/
|
|
.ui-tabs.cms-tabset-primary .ui-tabs-nav,
|
|
.ui-tabs .ui-tabs-nav.cms-tabset-nav-primary,
|
|
.ui-tabs .cms-content-header-tabs .ui-tabs-nav {
|
|
margin-top: 0;
|
|
float: none; // parent container is already right floated
|
|
|
|
li {
|
|
margin-right: 0; // tabs are directly adjacent
|
|
margin-top: 0;
|
|
a {
|
|
margin: 0;
|
|
// overlap divider line below
|
|
line-height: 40px - 1px;
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr, .ui-corner-tl {
|
|
border-radius:0;
|
|
}
|
|
|
|
.ui-state-default {
|
|
background: none;
|
|
border-top: none;
|
|
border: none;
|
|
}
|
|
|
|
.ui-state-active {
|
|
box-shadow: none;
|
|
background: transparent;
|
|
border-top: none;
|
|
border: none;
|
|
z-index:2;
|
|
|
|
a {
|
|
border-bottom: 4px solid #66727d;
|
|
padding: 0;
|
|
margin: 0 12px 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.cms-content-header-tabs {
|
|
float: right;
|
|
margin-top: $grid-y*1.5;
|
|
|
|
&.icon-button-group-tabs {
|
|
margin-top: 12px;
|
|
margin-bottom: 13px;
|
|
}
|
|
|
|
.icon-button-group {
|
|
margin-right: $grid-x*2;
|
|
}
|
|
}
|
|
|
|
.cms-content-fields .ui-tabs-nav {
|
|
float: none;
|
|
padding: 0;
|
|
border-bottom: 1px solid $color-button-generic-border;
|
|
margin: 0 16px 0;
|
|
|
|
li {
|
|
margin-bottom: -1px;
|
|
|
|
&.first a {
|
|
margin-left: 0;
|
|
padding-left: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
/** -------------------------------------------------------
|
|
* Loading Interface
|
|
* ------------------------------------------------------- */
|
|
|
|
.cms-content-loading-overlay {
|
|
position: absolute; // z-index doesn't apply properly without that
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 9998;
|
|
// Further styling by .ui-widget-overlay-light which is usually applied at the same time
|
|
}
|
|
|
|
.cms-content-loading-spinner {
|
|
position: absolute; // z-index doesn't apply properly without that
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 9999;
|
|
background: url(../images/spinner.gif) no-repeat 50% 50%;
|
|
}
|
|
|
|
/** -----------------------------------------------
|
|
* Loading Screen
|
|
* ------------------------------------------------ */
|
|
.ss-loading-screen {
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
position: absolute;
|
|
z-index: 100000;
|
|
// TODO Convert to compass gradient include
|
|
background: #fff;
|
|
background: -moz-radial-gradient(50% 50% 180deg, circle cover, #FFFFFF, #EFEFEF, #C7C7C7 100%);
|
|
background: -webkit-gradient(radial, 50% 50%, 350, 50% 50%, 0, from(#E3E3E3), to(white));
|
|
|
|
.loading-logo {
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
position: absolute;
|
|
background: transparent url(../images/silverstripe_logo.png) no-repeat 50% 50%;
|
|
}
|
|
|
|
p {
|
|
width: 100%;
|
|
text-align: center;
|
|
position: absolute;
|
|
bottom: 80px;
|
|
z-index: 100001;
|
|
|
|
span.notice {
|
|
width: 300px;
|
|
font-size: 14px;
|
|
padding: 10px 20px;
|
|
color: #dc7f00;
|
|
border: none;
|
|
background: none;
|
|
border-radius: 5px;
|
|
display: inline-block;
|
|
zoom: 1;
|
|
*display: inline;
|
|
}
|
|
}
|
|
|
|
.loading-animation {
|
|
display: none;
|
|
position: absolute;
|
|
left: 50%;
|
|
margin-left: -21.5px; // Half of spinner size
|
|
top: 80%;
|
|
}
|
|
}
|
|
|
|
/** --------------------------------------------
|
|
* Actions
|
|
* -------------------------------------------- */
|
|
|
|
.cms-content-actions, .cms-preview-controls {
|
|
margin: 0;
|
|
z-index: 999;
|
|
box-shadow: inset 0 1px 0 0 $color-light-separator;
|
|
height: 52px;
|
|
max-height: 52px;
|
|
background-color: $tab-panel-texture-color;
|
|
|
|
&.south .Actions {
|
|
height: 52px;
|
|
padding: $grid-y*1.5 $grid-x*2;
|
|
}
|
|
}
|
|
|
|
|
|
/** --------------------------------------------
|
|
* Messages
|
|
* -------------------------------------------- */
|
|
|
|
.message { // White
|
|
display: block;
|
|
clear: both;
|
|
margin: 0 0 $grid-y;
|
|
padding: $grid-y + $grid-x/4 $grid-x + $grid-x/2;
|
|
font-weight: normal;
|
|
border: 1px #ccc solid;
|
|
background: #fff; // for browsers that don't understand rgba
|
|
background: rgba(#fff,0.5);
|
|
text-shadow: none;
|
|
border-radius: 3px;
|
|
|
|
&.notice {
|
|
background-color: lighten($color-notice,22%); // Blue
|
|
border-color: $color-notice;
|
|
}
|
|
&.warning { // Yellow
|
|
background-color: lighten($color-warning,47%);
|
|
border-color: $color-warning;
|
|
}
|
|
&.error, &.bad, &.required, &.validation { // Red
|
|
background-color: lighten($color-error,24%);
|
|
border-color: $color-error;
|
|
}
|
|
&.good { // Green
|
|
background-color: lighten($color-good,40%);
|
|
border-color: $color-good;
|
|
}
|
|
|
|
p {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
|
|
.cms-edit-form {
|
|
.message {
|
|
margin: $grid-x*2; // TODO Remove double padding when adjacent to a padded tabs panel
|
|
}
|
|
.ui-tabs-panel {
|
|
.message {
|
|
margin: $grid-x*2 0; // gets padding from tab panel
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.notice-item {
|
|
border-radius: 3px;
|
|
font-family: inherit;
|
|
font-size: inherit;
|
|
padding: 6px 24px 8px 10px;
|
|
word-wrap: break-word;
|
|
min-height: 60px;
|
|
height: auto;
|
|
border: 0;
|
|
border-left: 3px solid;
|
|
color: #666;
|
|
left: 300px;
|
|
background: #fff;
|
|
|
|
&.success,
|
|
&.good,
|
|
&.green {
|
|
border-color: $color-good;
|
|
}
|
|
|
|
&.notice,
|
|
&.info,
|
|
&.blue {
|
|
border-color: $color-notice;
|
|
}
|
|
|
|
&.warning,
|
|
&.caution,
|
|
&.yellow {
|
|
border-color: $color-warning;
|
|
}
|
|
|
|
&.bad,
|
|
&.error,
|
|
&.red {
|
|
border-color: $color-error;
|
|
}
|
|
|
|
p {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.notice-item-close {
|
|
font-size: 0; // hide the textNode "x" that jquery.notice.js inserts
|
|
opacity: .8;
|
|
|
|
&:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
// apply relevant styles from .font-icon-cancel
|
|
&::before {
|
|
content: "\44";
|
|
font-size: 15px;
|
|
font-family: silverstripe, sans-serif;
|
|
font-weight: normal;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/** --------------------------------------------
|
|
* Page icons
|
|
* -------------------------------------------- */
|
|
|
|
.page-icon, a .jstree-pageicon {
|
|
display: block;
|
|
width: 16px;
|
|
height: 16px;
|
|
background: transparent url(../images/sitetree_ss_pageclass_icons_default.png) no-repeat;
|
|
}
|
|
|
|
.page-icon {
|
|
&.class-HomePage {
|
|
background-position: 0 -48px;
|
|
}
|
|
&.class-RedirectorPage {
|
|
background-position: 0 -16px;
|
|
}
|
|
&.class-VirtualPage {
|
|
background-position: 0 -32px;
|
|
}
|
|
&.class-ErrorPage {
|
|
background-position: 0 -112px;
|
|
}
|
|
}
|
|
|
|
/** --------------------------------------------
|
|
* "Add page" dialog
|
|
* -------------------------------------------- */
|
|
|
|
.cms-page-add-form-dialog {
|
|
|
|
display: none;
|
|
}
|
|
|
|
.cms-add-form {
|
|
.step-label {
|
|
opacity:0.9;
|
|
.flyout {
|
|
height:17px; //centres number within the grey arrow
|
|
padding-top:5px;
|
|
}
|
|
.title {
|
|
padding-top:5px; //aligns label with point of arrow
|
|
font-weight:bold; //to match pagetype label
|
|
text-shadow: 1px 1px 0 $color-text-shadow;
|
|
}
|
|
}
|
|
ul.SelectionGroup {
|
|
padding-left:28px;
|
|
overflow: visible;
|
|
@include legacy-pie-clearfix;
|
|
}
|
|
.parent-mode {
|
|
padding: $grid-x;
|
|
overflow: auto;
|
|
}
|
|
}
|
|
|
|
#PageType {
|
|
ul {
|
|
padding-left: 20px;
|
|
li {
|
|
float: none;
|
|
width: 100%;
|
|
padding: 9px 0 9px 15px;
|
|
overflow: hidden;
|
|
border-bottom-width: 2px;
|
|
border-bottom: 2px groove lighten($color-shadow-light, 95%);
|
|
-webkit-border-image: url(../images/textures/bg_fieldset_elements_border.png) 2 stretch stretch;
|
|
border-image: url(../images/textures/bg_fieldset_elements_border.png) 2 stretch stretch;
|
|
|
|
&:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
&:hover, &.selected {
|
|
background-color: $color-highlight-opacity;
|
|
}
|
|
|
|
&.disabled {
|
|
color: $color-text-disabled;
|
|
opacity: 0.5;
|
|
|
|
&:hover {
|
|
background: none;
|
|
}
|
|
}
|
|
|
|
input {
|
|
margin: inherit;
|
|
}
|
|
|
|
label {
|
|
padding-left: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
input, label, .page-icon, .title {
|
|
float: left;
|
|
line-height: 1.3em;
|
|
}
|
|
|
|
.page-icon {
|
|
margin: 0 4px;
|
|
}
|
|
|
|
.title {
|
|
width: 120px;
|
|
font-weight: bold;
|
|
padding-right: 10px;
|
|
}
|
|
|
|
.description {
|
|
font-style: italic;
|
|
// Undo some generic styles from tooltips
|
|
display: inline;
|
|
clear: none;
|
|
margin: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/** --------------------------------------------
|
|
* Content toolbar
|
|
* -------------------------------------------- */
|
|
|
|
.cms-content-toolbar {
|
|
min-height: 29px;
|
|
display: block;
|
|
margin: $grid-y*1.5 0 0;
|
|
padding-bottom: 0;
|
|
@include legacy-pie-clearfix();
|
|
border-bottom: 0;
|
|
box-shadow: none;
|
|
|
|
.cms-tree-view-modes {
|
|
float:right;
|
|
padding-top:$grid-y - 3;
|
|
* {
|
|
display: inline-block;
|
|
label {
|
|
color:$color-text-blue-link;
|
|
}
|
|
}
|
|
}
|
|
|
|
.cms-actions-tools-row {
|
|
clear: both;
|
|
}
|
|
|
|
.tool-action {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* DEPRECATED:
|
|
* .cms-content-tools will be removed in 4.0
|
|
* Use .cms-content-filters instead.
|
|
*
|
|
* Content Tools is the sidebar on the left of the main content
|
|
* panel
|
|
*/
|
|
.cms-content-tools {
|
|
background: $tab-panel-texture-color;
|
|
width: $grid-x * 36;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
z-index: 70;
|
|
box-shadow: 1px 0 0 0 $color-separator;
|
|
z-index: 1000;
|
|
float: left;
|
|
position: relative;
|
|
|
|
&.filter{
|
|
padding:0 !important;
|
|
}
|
|
|
|
.cms-panel-header {
|
|
clear: both;
|
|
margin: 10px 0 $grid-y - 1;
|
|
padding-bottom: 2px;
|
|
line-height: $grid-y * 3;
|
|
border-bottom: 1px solid $color-light-separator;
|
|
}
|
|
|
|
.cms-panel-content {
|
|
width: 300px;
|
|
overflow: auto;
|
|
height:100%;
|
|
|
|
.Actions .ss-ui-action-constructive {
|
|
margin-right:5px; //accounts for the scrollbar in the filter - keeps the actions on one line instead of wrapping onto two.
|
|
}
|
|
}
|
|
|
|
.cms-content-header {
|
|
background-color: darken($color-widget-bg, 40%);
|
|
background-image: linear-gradient(darken($color-widget-bg, 20%), darken($color-widget-bg, 40%));
|
|
|
|
h2 {
|
|
text-shadow: darken($color-widget-bg, 50%) -1px -1px 0;
|
|
width: $grid-x * 22 /* 24 - (padding on each side + margin) */;
|
|
color: lighten($color-widget-bg, 60%);
|
|
@include hide-text-overflow();
|
|
}
|
|
}
|
|
|
|
h3,h4,h5 {
|
|
font-weight: bold;
|
|
line-height: $grid-y * 2;
|
|
}
|
|
h3 {
|
|
font-size: $font-size-h5;
|
|
}
|
|
|
|
h4 {
|
|
font-size: $font-size-h5;
|
|
margin:5px 0;
|
|
}
|
|
|
|
.ui-widget-content {
|
|
background: none;
|
|
}
|
|
|
|
.field {
|
|
/*
|
|
* Fields are more compressed in the sidebar compared to the
|
|
* main content editing window so the below alters the internal
|
|
* spacing of the fields so we can move that spacing to between
|
|
* the form fields rather than padding
|
|
*/
|
|
label {
|
|
float: none;
|
|
width: auto;
|
|
font-size: $font-size-root;
|
|
padding: 0 $grid-x 4px 0;
|
|
}
|
|
|
|
.middleColumn {
|
|
margin: 0;
|
|
}
|
|
|
|
input.text,
|
|
select,
|
|
textarea {
|
|
padding: 5px;
|
|
font-size: 11px;
|
|
}
|
|
|
|
&.checkbox {
|
|
padding: 0 0 8px;
|
|
|
|
input {
|
|
margin: 2px 0;
|
|
}
|
|
}
|
|
|
|
.description {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
.fieldgroup {
|
|
.fieldgroup-field {
|
|
padding: 0;
|
|
|
|
.field {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
table {
|
|
margin: 8px -4px;
|
|
thead {
|
|
th {
|
|
color: $color-text-dark;
|
|
font-weight: bold;
|
|
line-height: 16px;
|
|
font-size: 11px;
|
|
padding: 4px;
|
|
}
|
|
}
|
|
|
|
tr {
|
|
&.active {
|
|
background-color: $color-menu-button;
|
|
color: $color-text-light;
|
|
|
|
td.first-column {
|
|
border-radius: 6px 0 0 6px;
|
|
}
|
|
td.last-column {
|
|
border-radius: 0 6px 6px 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
td {
|
|
padding: 4px;
|
|
line-height: 16px;
|
|
vertical-align: top;
|
|
}
|
|
}
|
|
|
|
td {
|
|
border-bottom: 1px solid darken($color-widget-bg, 10%);
|
|
padding: $grid-y - 1 2px;
|
|
font-size: 11px;
|
|
}
|
|
}
|
|
|
|
/** ------------------------------------------------------------------
|
|
* CMS notice, used for filter messages, but generic enough to use elsewhere
|
|
* ----------------------------------------------------------------- */
|
|
|
|
.cms-notice {
|
|
display: block;
|
|
margin: 0 0 8px;
|
|
padding: 10px 12px;
|
|
font-weight: normal;
|
|
border: 1px $color-light-separator solid;
|
|
background: #fff; //for browsers that don't understand rgba
|
|
background: rgba(#fff,0.5);
|
|
text-shadow: none;
|
|
}
|
|
|
|
.cms-tree-filtered {
|
|
position: absolute;
|
|
margin: 0;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
margin-left: -$grid-x*2;
|
|
padding: $grid-y*2 $grid-x*2;
|
|
background: #D4E2EC;
|
|
text-shadow: none;
|
|
border: 0;
|
|
|
|
> strong,
|
|
> a {
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* CMS Batch actions
|
|
*/
|
|
.cms-content-batchactions-button {
|
|
display: inline-block;
|
|
padding: 4px 6px;
|
|
vertical-align: middle;
|
|
background-image: linear-gradient(to bottom, #fff, #D9D9D9);
|
|
border: 1px solid #aaa;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.cms-content-batchactions {
|
|
float: left;
|
|
position: relative;
|
|
display: block;
|
|
|
|
.view-mode-batchactions-wrapper {
|
|
height: 18px;
|
|
float: left;
|
|
padding: 4px 6px;
|
|
border: 1px solid #aaa;
|
|
margin-bottom: 8px;
|
|
margin-right:-1px;
|
|
background-color: #D9D9D9;
|
|
background-image: linear-gradient(to bottom, #fff, #D9D9D9);
|
|
border-top-left-radius: 4px;
|
|
border-bottom-left-radius: 4px;
|
|
|
|
input {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.view-mode-batchactions-label {
|
|
vertical-align: middle;
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.checkbox {
|
|
margin-top: 2px;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
.cms-content-batchactions-dropdown {
|
|
display: inline-block;
|
|
|
|
// Context specific rules for when batch actions are in the SiteTree panel.
|
|
.cms-content-tools & {
|
|
width: 100%;
|
|
}
|
|
|
|
fieldset { // The dropdown element wrapper
|
|
display: inline-block;
|
|
width: 200px;
|
|
|
|
.view-mode-batchactions-label {
|
|
display: inline;
|
|
}
|
|
|
|
// Context specific rules for when batch actions are in the SiteTree panel.
|
|
.cms-content-tools & {
|
|
width: 82%;
|
|
}
|
|
}
|
|
|
|
.dropdown { // The 'select' element
|
|
width: 100%;
|
|
height: 32px;
|
|
|
|
.chosen-single {
|
|
border-top-right-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
.Actions {
|
|
display: inline-block;
|
|
padding: 0;
|
|
margin-left: -4px;
|
|
min-height: auto;
|
|
|
|
// Context specific rules for when batch actions are in the SiteTree panel.
|
|
.cms-content-tools & {
|
|
width: 16%;
|
|
}
|
|
}
|
|
|
|
.action {
|
|
width: 100%;
|
|
height: 32px;
|
|
margin-bottom: 0;
|
|
border-top-left-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
}
|
|
}
|
|
|
|
/** --------------------------------------------
|
|
* Preview
|
|
* -------------------------------------------- */
|
|
.cms-switch-view {
|
|
a {
|
|
padding-right: 1em;
|
|
}
|
|
}
|
|
|
|
/** --------------------------------------------
|
|
* Member Profile
|
|
* -------------------------------------------- */
|
|
|
|
form.member-profile-form {
|
|
padding: 0 $grid-x*2 0 0;
|
|
|
|
#Root_Permissions {
|
|
clear:both;
|
|
border-top: 1px solid darken($color-tab, 20%);
|
|
}
|
|
|
|
#Root_Main {
|
|
clear:both;
|
|
border-top: 1px solid darken($color-tab, 20%);
|
|
.cms-help-toggle {
|
|
text-indent: -9999em;
|
|
display: inline-block;
|
|
width: 20px;
|
|
background:url(../images/question.png) no-repeat 0px 0px;
|
|
}
|
|
}
|
|
|
|
#FavouritePageID {
|
|
margin-top:$grid-y;
|
|
}
|
|
|
|
#CsvFile .middleColumn {
|
|
background: none !important;
|
|
}
|
|
|
|
.advanced h4 {
|
|
margin-bottom: .5em;
|
|
}
|
|
.Actions {
|
|
text-align: left;
|
|
border: 0;
|
|
}
|
|
input.customFormat {
|
|
width: $grid-x * 10;
|
|
border: 1px solid #ccc !important;
|
|
padding: 3px;
|
|
display: inline-block;
|
|
margin-left: 1em;
|
|
}
|
|
.formattingHelpToggle {
|
|
display: block;
|
|
font-size: 11px;
|
|
}
|
|
.formattingHelpText {
|
|
margin: 5px 0 0 -5px;
|
|
color: #333;
|
|
padding: 5px 10px;
|
|
background: #fff;
|
|
border: 1px solid #ccc;
|
|
}
|
|
.formattingHelpText ul {
|
|
padding: 0;
|
|
}
|
|
.formattingHelpText li {
|
|
font-size: 11px;
|
|
color: #333;
|
|
margin-bottom: 2px;
|
|
padding-bottom: 0;
|
|
float: none;
|
|
width: auto;
|
|
}
|
|
#Groups .middleColumn {
|
|
margin-left: 0;
|
|
width: 100%;
|
|
.TreeDropdownField {
|
|
width: 90%;
|
|
max-width: 90%;
|
|
}
|
|
}
|
|
|
|
// Same rules in .SecurityAdmin
|
|
#Permissions {
|
|
.optionset {
|
|
li {
|
|
float: none;
|
|
width: auto;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.memberdatetimeoptionset {
|
|
.description {
|
|
font-style: normal;
|
|
}
|
|
.toggle {
|
|
font-size: $font-size-sm;
|
|
}
|
|
}
|
|
|
|
.cms {
|
|
.cms-content {
|
|
border-right: 1px solid #BBB;
|
|
border-radius: 0;
|
|
background: $tab-panel-texture-color;
|
|
width: 800px;
|
|
z-index: 40;
|
|
}
|
|
|
|
.cms-content-fields {
|
|
// 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 {
|
|
border-bottom:none;
|
|
box-shadow:none;
|
|
}
|
|
.customFormat {
|
|
max-width:80px;
|
|
}
|
|
.cms-help-toggle {
|
|
text-indent: -9999em;
|
|
display: inline-block;
|
|
width: 20px;
|
|
background:url(../images/question.png) no-repeat 0px 0px;
|
|
}
|
|
}
|
|
#Root_Permissions{
|
|
ul.optionset li {
|
|
float:none;
|
|
}
|
|
}
|
|
}
|
|
form.member-profile-form {
|
|
#Root .ui-tabs-nav {
|
|
display: none;
|
|
}
|
|
|
|
#Root_Main, #Root_Permissions {
|
|
border: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
/** --------------------------------------------
|
|
* "Settings" Form
|
|
* -------------------------------------------- */
|
|
#CanViewType, #CanEditType, #CanCreateTopLevelType {
|
|
.optionset li {
|
|
// All options on their own line
|
|
float: none;
|
|
width: auto;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
#ViewerGroups, #EditorGroups, #CreateTopLevelGroups {
|
|
select {
|
|
// Fix for chosen.js width detection on hidden elements.
|
|
// TODO Remove once .field styling in _form.scss is refactored to allow flexible field widths
|
|
width: $grid-x * 64;
|
|
}
|
|
}
|
|
|
|
/** --------------------------------------------
|
|
* Panels
|
|
* -------------------------------------------- */
|
|
|
|
.cms-panel {
|
|
|
|
.cms-panel-toggle {
|
|
&.south {
|
|
box-shadow: inset $color-light-separator 0 1px 0; // #C1C7CC
|
|
position: absolute;
|
|
bottom: 0;
|
|
width: 100%;
|
|
min-height: 53px;
|
|
}
|
|
|
|
a {
|
|
display: block;
|
|
text-align: right;
|
|
padding: 13px 0;
|
|
width: 100%;
|
|
text-decoration: none;
|
|
line-height: 20px;
|
|
height: 52px;
|
|
|
|
span {
|
|
display: inline-block;
|
|
margin: 0 8px;
|
|
color: #555d60;
|
|
font-size: 16px;
|
|
}
|
|
|
|
&.toggle-expand {
|
|
width: 60px; // will set the collapsed width
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.collapsed {
|
|
cursor: pointer;
|
|
.cms-panel-header *,
|
|
.cms-panel-content,
|
|
.cms-panel-toggle a.toggle-collapse{
|
|
display:none;
|
|
}
|
|
.cms-panel-toggle a.toggle-expand {
|
|
display: block;
|
|
}
|
|
|
|
}
|
|
|
|
.cms-panel-header {
|
|
width: 100%;
|
|
}
|
|
|
|
&#cms-content-tools-CMSPageEditController {
|
|
.cms-panel-content-collapsed {
|
|
width: 60px;
|
|
display: none; // Avoids FOUC
|
|
|
|
h2, h3 {
|
|
border-bottom: 0;
|
|
margin-left: $grid-y;
|
|
transform-origin: bottom, right;
|
|
transform: rotate(270deg);
|
|
}
|
|
.cms-panel-header {
|
|
width: 600px;
|
|
position: relative;
|
|
top: 24px;
|
|
right: 577px;
|
|
text-align: right;
|
|
}
|
|
}
|
|
}
|
|
|
|
.cms-panel-content-collapsed {
|
|
width: 60px;
|
|
display: none; // Avoids FOUC
|
|
height: calc(100% - 52px);
|
|
overflow: hidden;
|
|
|
|
h2, h3 {
|
|
border-bottom: 0;
|
|
margin-left: 18px;
|
|
transform-origin: bottom right;
|
|
transform: rotate(270deg);
|
|
}
|
|
|
|
.cms-panel-header {
|
|
width: 600px;
|
|
position: relative;
|
|
right: 574px;
|
|
text-align: right;
|
|
border-bottom: none;
|
|
box-shadow: none;
|
|
margin-top: -5px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.cms {
|
|
.cms-panel-padded {
|
|
&.ReportAdmin {
|
|
> fieldset {
|
|
padding: 12px 16px;
|
|
}
|
|
}
|
|
|
|
.cms-content-view {
|
|
padding: 0 $grid-x*2 $grid-y*1.5;
|
|
}
|
|
}
|
|
}
|
|
|
|
.CMSPageAddController {
|
|
.cms-panel-padded {
|
|
padding: $grid-y*2 $grid-x*2;
|
|
}
|
|
}
|
|
/** ------------------------------------------------------------------
|
|
* Dialog
|
|
*
|
|
* Contained in a jQuery UI dialog ('.ui-dialog'), with either inline
|
|
* markup (for the "insert" dialogs), or an iframe (for member profile).
|
|
* ----------------------------------------------------------------- */
|
|
|
|
// overlay for switching between CMS panes
|
|
.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;
|
|
}
|
|
|
|
// Adjusting the color of the background overlay to be darker for pop-up dialogs (created by jQuery-UI)
|
|
.cms .ui-widget-overlay {
|
|
background-color: #000;
|
|
background-image: none;
|
|
}
|
|
|
|
.cms .ui-dialog{
|
|
.ss-ui-dialog.ui-dialog-content {
|
|
padding-top: 0px; //removes padding so that tabs are flush with header
|
|
}
|
|
}
|
|
|
|
// Elements with this class can either frame inline markup or an iframe,
|
|
// most styles should be applied to .cms-dialog instead (which declares the content in the frame)
|
|
.ui-dialog {
|
|
background: $tab-panel-texture-color;
|
|
background-clip: content-box;
|
|
border: 1px solid #666 !important;
|
|
border-radius: $grid-y;
|
|
overflow: visible;
|
|
padding: 0;
|
|
box-shadow: 0px 0px 30px 10px rgba(0,0,0,.3);
|
|
|
|
// Titlebar for pop-up dialog.
|
|
.ui-dialog-titlebar.ui-widget-header {
|
|
font-size: $font-size-root +1;
|
|
padding: 0;
|
|
border:none;
|
|
background: transparent url(../images/textures/cms_content_header.png) repeat;
|
|
box-shadow: $color-shadow-dark 0 0 ($grid-x / 2) inset;
|
|
|
|
.ui-dialog-title {
|
|
position:absolute;
|
|
}
|
|
}
|
|
|
|
.ui-dialog-content {
|
|
border-radius: $grid-y;
|
|
overflow: auto; // TODO Replace with proper $.layout grid
|
|
|
|
&.loading {
|
|
background-image: url(../images/spinner.gif);
|
|
background-position: 50% 50%;
|
|
background-repeat: no-repeat;
|
|
}
|
|
}
|
|
|
|
.cms-dialog-content {
|
|
background: $tab-panel-texture-color;
|
|
padding-bottom: $grid-y;
|
|
padding-top:0px;
|
|
|
|
.Actions {
|
|
overflow: auto;
|
|
margin: $grid-y 0;
|
|
padding-bottom: $grid-y;
|
|
float: right;
|
|
}
|
|
|
|
.ui-tabs{
|
|
position:static;
|
|
// Shift navigation upwards to be horizontally centered with dialog title.
|
|
// Can't use floats since this title is in a different DOM parent sibling
|
|
// Note: Does NOT apply to member profile form (unnecessary, since it doesn't have a dialog title)
|
|
.ui-tabs-nav {
|
|
position:absolute;
|
|
top: 9px;
|
|
// Tabs nav is included in scollbar. By absolutely positioning it off the edge,
|
|
// we avoid tabs shifting position when scrollbar toggles
|
|
right: 40px;
|
|
}
|
|
|
|
// Don't show top border, since these styles already have a title bar
|
|
.ui-tabs-panel {
|
|
border: 0;
|
|
}
|
|
}
|
|
|
|
.clear {
|
|
clear: both;
|
|
}
|
|
|
|
}
|
|
|
|
&.loading {
|
|
background-image: url(../images/spinner.gif);
|
|
background-position: 50% 50%;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.ui-dialog-buttonpane {
|
|
margin: 0;
|
|
background: $color-darker-bg;
|
|
border-top: 1px solid $color-light-separator;
|
|
border-bottom-left-radius: 8px;
|
|
border-bottom-right-radius: 8px;
|
|
}
|
|
}
|
|
|
|
body.cms-dialog {
|
|
overflow: auto;
|
|
background: $tab-panel-texture-color;
|
|
position:relative;
|
|
}
|
|
|
|
/** --------------------------------------------
|
|
* "Insert X" forms
|
|
* -------------------------------------------- */
|
|
.htmleditorfield-dialog{
|
|
&.ui-dialog-content{
|
|
padding:0;
|
|
position:relative;
|
|
}
|
|
|
|
.htmleditorfield-from-web {
|
|
text-align: center;
|
|
margin-bottom: $grid-y;
|
|
|
|
&.CompositeField{
|
|
@include clearfix;
|
|
}
|
|
|
|
.url-description {
|
|
text-align: left;
|
|
margin-bottom: $grid-y*1.5;
|
|
}
|
|
|
|
div.remoteurl{
|
|
border:none;
|
|
@include box-shadow-none;
|
|
width: 80%; //Fallback for IE 8
|
|
width: calc(100% - 80px);
|
|
position: relative;
|
|
display: inline-block;
|
|
padding: 0;
|
|
margin: 0;
|
|
|
|
label {
|
|
position: absolute;
|
|
left: 8px;
|
|
top: 0;
|
|
font-weight: normal;
|
|
color: #888;
|
|
width: 35px;
|
|
padding-right: 0;
|
|
z-index: 1;
|
|
}
|
|
|
|
.middleColumn {
|
|
margin-left: 0;
|
|
max-width: none;
|
|
}
|
|
|
|
input.remoteurl {
|
|
padding-left: 44px;
|
|
max-width: none;
|
|
}
|
|
}
|
|
|
|
button.add-url{
|
|
display: inline-block;;
|
|
float: none;
|
|
margin: 2px 0 0;
|
|
vertical-align: top;
|
|
|
|
&:hover, &:active{
|
|
opacity:1;
|
|
}
|
|
|
|
&.ui-state-disabled {
|
|
&, &:hover, &:active {
|
|
opacity: 0.35;
|
|
filter: Alpha(Opacity=35);
|
|
}
|
|
}
|
|
}
|
|
|
|
&.loading button.add-url::before {
|
|
content: '';
|
|
background: url(../images/throbber.gif) no-repeat center center;
|
|
padding: 8px;
|
|
}
|
|
}
|
|
|
|
.cms-content-header{
|
|
padding:0;
|
|
width:100%;
|
|
height: 53px;
|
|
|
|
h3{
|
|
padding: $grid-y*1.5 0 $grid-y*1.5 $grid-x*2;
|
|
margin: 0;
|
|
line-height: 28px;
|
|
display: inline-block;
|
|
font-weight: normal;
|
|
|
|
&.insert {
|
|
.back-button {
|
|
margin: 0;
|
|
padding: 0;
|
|
cursor: pointer;
|
|
|
|
&::before {
|
|
margin-right: 4px;
|
|
font-size: 18px;
|
|
vertical-align: text-bottom;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.ss-insert-media, .ss-insert-link {
|
|
padding: $grid-y*1.5 $grid-x*2;
|
|
|
|
.ui-tabs-panel {
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
.Actions {
|
|
padding:$grid-y $grid-x*2 ;
|
|
|
|
.ui-tabs-panel {
|
|
padding: 0;
|
|
}
|
|
}
|
|
.details{
|
|
.file-url{
|
|
display:block;
|
|
width:300px;
|
|
@include hide-text-overflow;
|
|
}
|
|
.cms-file-info{
|
|
.field{
|
|
border:none;
|
|
box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
|
}
|
|
}
|
|
.field{
|
|
border-bottom: 1px solid $color-shadow-light;
|
|
box-shadow: 0 1px 0 lighten($color-shadow-light, 95%);
|
|
&.last{
|
|
border-bottom:none;
|
|
box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
|
margin-bottom:0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.CompositeField{
|
|
.text{
|
|
select{
|
|
margin: 5px 0 0 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.htmleditorfield-linkform {
|
|
.step2 {
|
|
margin-bottom: $grid-x*2;
|
|
}
|
|
.ss-uploadfield {
|
|
.middleColumn {
|
|
width: auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
.htmleditorfield-mediaform {
|
|
.ss-gridfield {
|
|
.gridfield-button-delete {
|
|
// TODO Remove from PHP instead of hiding
|
|
display: none; // delete action shouldn't be allowed here
|
|
}
|
|
}
|
|
|
|
.htmleditorfield-from-web, .htmleditorfield-from-cms {
|
|
&.ss-uploadfield {
|
|
.middleColumn {
|
|
width:auto;
|
|
background:none;
|
|
border:none;
|
|
min-width: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.htmleditorfield-from-cms {
|
|
&.ss-uploadfield {
|
|
h4 {
|
|
float: left; // headline and dropdown on same line
|
|
margin-top: $grid-y/2; // bring to same baseline as dropdown
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.middleColumn {
|
|
min-width: 0; // fit within available space
|
|
clear: none; // headline and dropdown on same line
|
|
}
|
|
|
|
.field.treedropdown {
|
|
border-bottom: 0; // don't show border, dropdown and gridfield visually belong together
|
|
padding: 0;
|
|
position: absolute;
|
|
margin: 0;
|
|
top: 12px;
|
|
left: 160px;
|
|
width: auto;
|
|
min-width: 200px;
|
|
}
|
|
|
|
.treedropdownfield-title {
|
|
width: auto;
|
|
padding: 5px 2px 5px 4px;
|
|
max-width: 200px;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.treedropdownfield-toggle-panel-link {
|
|
padding: 5px 4px 5px 0;
|
|
|
|
a {
|
|
background: url(../images/sitetree_ss_default_icons.png);
|
|
background-position: -18px -4px;
|
|
height: 14px;
|
|
opacity: .8;
|
|
}
|
|
}
|
|
|
|
.TreeDropdownField {
|
|
background: 0;
|
|
box-shadow: none;
|
|
border: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.ss-assetuploadfield .ss-uploadfield-editandorganize {
|
|
.ss-uploadfield-files {
|
|
.ss-uploadfield-item-info {
|
|
background-color: grayscale(#5db4df);
|
|
background-image: linear-gradient(to bottom, grayscale(#5db4df) 0%, grayscale(#5db1dd) 8%, grayscale(#439bcb) 50%, grayscale(#3f99cd) 54%, grayscale(#207db6) 96%, grayscale(#1e7cba) 100%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/** --------------------------------------------
|
|
* Search forms (used in AssetAdmin, ModelAdmin, etc)
|
|
* -------------------------------------------- */
|
|
.cms-search-form {
|
|
margin-bottom: $grid-y*2;
|
|
.filter &{
|
|
margin-bottom:0;
|
|
}
|
|
.Actions {
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
/** --------------------------------------------
|
|
* Step labels
|
|
* -------------------------------------------- */
|
|
.step-label {
|
|
|
|
& > * {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.flyout {
|
|
height: 26px - 2*4px; // minus padding
|
|
font-size: $font-size-root +1;
|
|
font-weight: bold;
|
|
border-top-left-radius: 3px;
|
|
border-bottom-left-radius: 3px;
|
|
background-color: #667980; // hardcoding colour since its tied to the sprite
|
|
padding: 4px 3px 4px 6px;
|
|
text-align: center;
|
|
text-shadow: none;
|
|
color: #fff;
|
|
}
|
|
|
|
.arrow {
|
|
height: 26px;
|
|
width: 10px;
|
|
margin-right: 4px;
|
|
@extend .icon-sprites-32x32;
|
|
@include sprite($sprites-32x32-numeric-label);
|
|
}
|
|
|
|
.title {
|
|
height: 26px - 2*4px; // minus padding
|
|
padding: 4px;
|
|
}
|
|
}
|
|
|
|
|
|
/** --------------------------------------------
|
|
* Item Edit Form
|
|
* -------------------------------------------- */
|
|
|
|
.cms-file-info {
|
|
overflow: auto;
|
|
// Emulate .field bottom border styling without applying .field class,
|
|
// as it messes up the nested .field element styling (blocklevel labels)
|
|
border-bottom: 1px solid $color-shadow-light;
|
|
box-shadow: 0 1px 0 lighten($color-shadow-light, 95%);
|
|
margin-bottom: $grid-x;
|
|
|
|
// Preview might not always be available
|
|
.cms-file-info-preview {
|
|
float: left;
|
|
width: $grid-x * 22; // Same as ".field label"
|
|
margin-right: $grid-x;
|
|
|
|
img {
|
|
max-width: $grid-x * 22; // Same as ".field label"
|
|
max-height: $grid-x * 16; // Fitting typical info displayed (~5 rows)
|
|
}
|
|
}
|
|
.cms-file-info-data {
|
|
float: left;
|
|
width: 55%;
|
|
|
|
.field {
|
|
// Unsetting styles from .field, make it more compact visually
|
|
margin: 0;
|
|
padding-bottom: $grid-x;
|
|
border: none;
|
|
box-shadow: none;
|
|
label.left {
|
|
width: $grid-x*12;
|
|
}
|
|
.middleColumn {
|
|
margin-left: $grid-x*13;
|
|
}
|
|
label, span {
|
|
padding: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
form.small {
|
|
.cms-file-info-preview {
|
|
width: $grid-x*14;
|
|
|
|
img {
|
|
max-width: $grid-x*14;
|
|
}
|
|
}
|
|
|
|
.cms-file-info-data {
|
|
// Ensure it fits beside the image preview, increased size for long url
|
|
max-width: 550px;
|
|
|
|
|
|
// Reduced label widths to fit everything in smaller space
|
|
.field {
|
|
padding-bottom: 0;
|
|
|
|
label {
|
|
width: $grid-x*14;
|
|
}
|
|
.middleColumn {
|
|
margin-left: $grid-x*15;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/** --------------------------------------------
|
|
* Users Members Admin
|
|
* -------------------------------------------- */
|
|
|
|
.members_grid {
|
|
span button#action_gridfield_relationfind {
|
|
display:none; //hides find button - redundant functionality
|
|
}
|
|
p button#action_export {
|
|
span.btn-icon-download-csv {
|
|
height:17px; //exact height of icon
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Import forms
|
|
*/
|
|
|
|
form.import-form {
|
|
ul {
|
|
list-style: disc;
|
|
li {
|
|
margin-left: 20px;
|
|
}
|
|
}
|
|
p {
|
|
margin-bottom: 5px;
|
|
}
|
|
label.left {
|
|
width: 250px;
|
|
}
|
|
|
|
}
|
|
|
|
/** --------------------------------------------
|
|
* Page Edit Controller
|
|
* -------------------------------------------- */
|
|
|
|
/*.cms-container {
|
|
.CMSPageEditController, .CMSPageSettingsController, .CMSPageHistoryController {
|
|
// Fix pixel gap between nav tree and main page header
|
|
margin-left: -1px; // Removed to close gap far right of right tabs?
|
|
}
|
|
}*/
|
|
|
|
/** --------------------------------------------
|
|
* Page Settings Controller
|
|
* -------------------------------------------- */
|
|
|
|
.cms-container .CMSMain.CMSPageSettingsController {
|
|
.tab#Root_Settings {
|
|
.optionset li {
|
|
white-space:nowrap;
|
|
label {
|
|
padding-left:2px;
|
|
}
|
|
}
|
|
.fieldgroup .fieldgroup-field {
|
|
width:$grid-x*27;
|
|
padding-left:0;
|
|
}
|
|
}
|
|
}
|
|
|
|
/** --------------------------------------------
|
|
* Buttons for FileUpload
|
|
* -------------------------------------------- */
|
|
.ss-uploadfield-item-edit-all .ui-button-text{
|
|
padding-right:0;
|
|
}
|
|
|
|
.toggle-details-icon {
|
|
@extend .icon-sprites-32x32;
|
|
@include sprite($sprites-32x32-menu-arrow-down);
|
|
|
|
.ss-uploadfield-item-edit-all & {
|
|
@extend .icon-sprites-32x32;
|
|
@include sprite($sprites-32x32-menu-arrow-deselected-down);
|
|
|
|
display:inline-block;
|
|
width:8px;
|
|
height:8px;
|
|
padding-left:5px;
|
|
}
|
|
|
|
&.opened {
|
|
@extend .icon-sprites-32x32;
|
|
@include sprite($sprites-32x32-menu-arrow-up);
|
|
|
|
.ss-uploadfield-item-edit-all &{
|
|
@extend .icon-sprites-32x32;
|
|
@include sprite($sprites-32x32-menu-arrow-deselected-up);
|
|
|
|
display:inline-block;
|
|
}
|
|
}
|
|
}
|
|
|
|
/** --------------------------------------------
|
|
* Hide preview toggle link by default.
|
|
* May be shown js if needed.
|
|
* -------------------------------------------- */
|
|
.cms .Actions > .cms-preview-toggle-link,
|
|
.cms .cms-navigator > .cms-preview-toggle-link{
|
|
display:none;
|
|
}
|