mirror of
https://github.com/silverstripe/silverstripe-framework
synced 2024-07-26 13:23:55 +02:00
7ae73eabdd
This bug reappeared when branches were merged because the 3.0 version of _style.scss had tabsets defined in different places. This scss was inserted, but there was no idication that it was new to master (except in the resulting css file). As these styles are declared differently elsewhere in _style.scss, I think this declaration must have been refactored in an earlier commit in master.
1861 lines
36 KiB
SCSS
1861 lines
36 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).
|
|
*/
|
|
@import "compass";
|
|
@import "compass/css3";
|
|
@import "compass/utilities";
|
|
|
|
/** ----------------------------------------------------
|
|
* 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;
|
|
}
|
|
}
|
|
|
|
body .ui-widget {
|
|
font-family: $font-family;
|
|
font-size: $font-base-size;
|
|
}
|
|
|
|
strong {
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
/** --------------------------------------------
|
|
* Helpers
|
|
* -------------------------------------------- */
|
|
|
|
.cms-helper-hide-actions {
|
|
.Actions {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.hide {
|
|
display: none;
|
|
}
|
|
|
|
/** --------------------------------------------
|
|
* Panels Styles
|
|
* -------------------------------------------- */
|
|
.cms-container {
|
|
height: 100%;
|
|
background: $tab-panel-texture-background;
|
|
}
|
|
|
|
.cms-preview,
|
|
.cms-menu,
|
|
.cms-content,
|
|
.cms-content-header,
|
|
.cms-content-tools,
|
|
.cms-content-fields,
|
|
.cms-edit-form,
|
|
.cms-preview,
|
|
.cms-preview iframe,
|
|
.cms-preview-controls
|
|
{
|
|
@include inline-block;
|
|
}
|
|
|
|
.cms-content-header {
|
|
padding-left: $grid-x * 2;
|
|
z-index: 60;
|
|
@include box-shadow($color-shadow-dark 0 0 ($grid-x / 2) inset);
|
|
background: {
|
|
image:url(../images/textures/cms_content_header.png);
|
|
repeat:repeat;
|
|
}
|
|
|
|
.cms-content-header-info *,
|
|
.cms-content-header-tabs * {
|
|
@include inline-block;
|
|
}
|
|
|
|
a {
|
|
color: $color-text-blue-link;
|
|
}
|
|
|
|
.backlink {
|
|
span.btn-icon-back {
|
|
height:16px;
|
|
}
|
|
}
|
|
|
|
h2 {
|
|
font-size: $font-base-size + 2;
|
|
font-weight: bold;
|
|
margin: 0;
|
|
}
|
|
|
|
.cms-content-header-info {
|
|
float:left;
|
|
// TODO 2px less than tabs to ensure tabs bottom align correctly, shouldn't be necessary
|
|
line-height: 38px;
|
|
}
|
|
|
|
.cms-content-header-tabs {
|
|
float: right;
|
|
padding-right: $grid-x*3;
|
|
line-height: 40px;
|
|
|
|
.ui-tabs-nav {
|
|
li {
|
|
a {
|
|
@include inline-block;
|
|
float: none;
|
|
line-height: 40px;
|
|
font-weight: bold;
|
|
margin: 0;
|
|
padding: 0 $grid-x*2;
|
|
}
|
|
}
|
|
|
|
.ui-state-default,
|
|
.ui-widget-content .ui-state-default,
|
|
.ui-widget-header .ui-state-default {
|
|
border: {
|
|
top:none;
|
|
}
|
|
@include box-shadow($color-shadow-light 0 0 2px);
|
|
}
|
|
|
|
.ui-state-active,
|
|
.ui-widget-content .ui-state-active,
|
|
.ui-widget-header .ui-state-active {
|
|
border: {
|
|
top:none;
|
|
}
|
|
padding-bottom:0px;
|
|
@include box-shadow(none);
|
|
}
|
|
.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr {
|
|
border-radius:0;
|
|
}
|
|
|
|
.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl {
|
|
border-radius:0;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Reset to default styles
|
|
.ss-ui-button {
|
|
line-height: $grid-x*3;
|
|
|
|
.ui-button-text {
|
|
line-height: 1.4;
|
|
}
|
|
}
|
|
}
|
|
|
|
.cms-edit-form {
|
|
.cms-content-header-tabs {
|
|
.ui-tabs-nav {
|
|
li {
|
|
a {
|
|
text-indent:0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/** --------------------------------------------
|
|
* Tabs
|
|
* -------------------------------------------- */
|
|
.cms-content-header .ui-tabs-nav, .cms-dialog .ui-tabs-nav {
|
|
li {
|
|
margin:0;
|
|
a {
|
|
font-weight: bold;
|
|
line-height: $grid-y * 2;
|
|
padding: ($grid-y * 2 - 4) ($grid-x * 2 + 4) $grid-y + 3;
|
|
}
|
|
}
|
|
|
|
.ui-state-default,
|
|
.ui-widget-content .ui-state-default,
|
|
.ui-widget-header .ui-state-default {
|
|
background-color: $color-base;
|
|
text-shadow: lighten($color-tab, 5%) 0 1px 0;
|
|
@include background-image(
|
|
linear-gradient($color-base, darken($color-base, 12%))
|
|
);
|
|
|
|
border: {
|
|
right-color: darken($color-base, 15%);
|
|
left-color: lighten($color-base, 10%);
|
|
}
|
|
|
|
a {
|
|
color: #FFF;
|
|
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
|
|
}
|
|
}
|
|
|
|
.ui-state-active,
|
|
.ui-widget-content .ui-state-active,
|
|
.ui-widget-header .ui-state-active {
|
|
background: $tab-panel-texture-background;
|
|
border: {
|
|
right-color: darken($color-tab, 15%); // same color as divider between header and body, needed for IE
|
|
left-color: darken($color-tab, 15%);
|
|
}
|
|
margin-right:-1px;
|
|
margin-left:-1px;
|
|
z-index:2;
|
|
|
|
a {
|
|
border-bottom: none;
|
|
color: $color-text;
|
|
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
|
|
}
|
|
}
|
|
}
|
|
|
|
.CMSPagesController {
|
|
.cms-content-header-tabs {
|
|
.ui-tabs-nav {
|
|
li {
|
|
a {
|
|
font-weight: bold;
|
|
line-height: $grid-y * 2;
|
|
padding: ($grid-y * 2 - 4) ($grid-x * 2 + 4) $grid-y + 3;
|
|
text-transform: capitalize;
|
|
text-indent: -9999em;
|
|
display: block;
|
|
background: url(../images/content-header-tabs-sprite.png) no-repeat;
|
|
}
|
|
|
|
&.content-treeview a {
|
|
background-position: 2px 0px;
|
|
}
|
|
&.content-galleryview a {
|
|
background-position: -87px 0px;
|
|
}
|
|
&.content-listview a {
|
|
background-position: -38px 0px;
|
|
}
|
|
}
|
|
|
|
.ui-state-active,
|
|
.ui-widget-content .ui-state-active,
|
|
.ui-widget-header .ui-state-active {
|
|
border: {
|
|
top:none;
|
|
}
|
|
padding-bottom:1px;
|
|
|
|
&.content-treeview a {
|
|
background-position: 2px -40px;
|
|
}
|
|
&.content-galleryview a {
|
|
background-position: -87px -40px;
|
|
}
|
|
&.content-listview a {
|
|
background-position: -38px -40px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.CMSPageEditController, .CMSPageSettingsController, .CMSPageHistoryController {
|
|
.cms-content-header-tabs .ui-tabs-nav .ui-state-active {
|
|
background: darken($color-widget-bg, 2%);
|
|
}
|
|
}
|
|
|
|
/** -------------------------------------------------------
|
|
* 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/logo.gif) 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;
|
|
@include border-radius(5px);
|
|
display: inline-block;
|
|
zoom: 1;
|
|
*display: inline;
|
|
}
|
|
}
|
|
|
|
.loading-animation {
|
|
display: none;
|
|
position: absolute;
|
|
left: 49%;
|
|
top: 75%;
|
|
}
|
|
}
|
|
|
|
/** --------------------------------------------
|
|
* Actions
|
|
* -------------------------------------------- */
|
|
|
|
.cms-content-actions {
|
|
margin: 0;
|
|
padding: $grid-y*1.5 $grid-y*2;
|
|
z-index: 0;
|
|
border-top: 1px solid $color-light-separator;
|
|
border-top: 1px solid #FAFAFA;
|
|
@include box-shadow(#CCC 0 -1px 1px);
|
|
}
|
|
|
|
/** --------------------------------------------
|
|
* Messages
|
|
* -------------------------------------------- */
|
|
|
|
.message {
|
|
display: block;
|
|
clear: both;
|
|
margin: 0 0 $grid-y 0;
|
|
padding: $grid-y - 1 $grid-x - 1;
|
|
font-weight: bold;
|
|
border: 1px #ccc solid;
|
|
background:#fff; //for browsers that don't understand rgba
|
|
background:rgba(#fff,0.5);
|
|
@include border-radius(3px 3px 3px 3px);
|
|
&.notice {
|
|
background: $color-notice;
|
|
border-color: darken(adjust-hue($color-notice, -10), 7%);
|
|
a {
|
|
color: #999;
|
|
}
|
|
}
|
|
&.warning {
|
|
background-color: lighten($color-warning, 20%);
|
|
border-color: $color-warning;
|
|
}
|
|
&.error, &.bad, &.required, &.validation {
|
|
background: lighten($color-error, 43%);//for browsers that don't understand rgba
|
|
background: rgba(lighten($color-error, 40%), 0.5);
|
|
border-color: lighten(adjust-hue($color-error, -10), 38%);
|
|
color:$color-error;
|
|
}
|
|
&.good {
|
|
background: $color-good;//for browsers that don't understand rgba
|
|
background: rgba($color-good,0.7);
|
|
border-color: $color-good;
|
|
color:#fff;
|
|
@include text-shadow(1px -1px 0 $color-button-constructive);
|
|
a {
|
|
text-shadow:none;
|
|
}
|
|
}
|
|
|
|
p {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
/** --------------------------------------------
|
|
* 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
|
|
@include text-shadow(1px 1px 0 $color-text-shadow);
|
|
}
|
|
}
|
|
ul.SelectionGroup {
|
|
padding-left:28px;
|
|
}
|
|
.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;
|
|
&: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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/** --------------------------------------------
|
|
* Content toolbar
|
|
* -------------------------------------------- */
|
|
|
|
.cms-content-toolbar {
|
|
min-height:35px;
|
|
display: block;
|
|
margin: 0 0 15px 0;
|
|
|
|
@include doubleborder(bottom, $color-light-separator, lighten($color-light-separator, 50%));
|
|
@include legacy-pie-clearfix();
|
|
|
|
.cms-tree-view-modes {
|
|
float:right;
|
|
padding-top:$grid-y - 3;
|
|
* {
|
|
display: inline-block;
|
|
label {
|
|
color:$color-text-blue-link;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* smaller treedropdown */
|
|
.chzn-container-single .chzn-single {
|
|
height: 26px;
|
|
line-height: 26px;
|
|
padding-left:25px;
|
|
color: darken($color-dark-grey, 15%);
|
|
@include background-image(
|
|
linear-gradient($color-button-generic, darken($color-button-generic, 10%))
|
|
);
|
|
font: {
|
|
size:13px;
|
|
weight:bold;
|
|
}
|
|
text-shadow:darken($color-text-shadow, 10%) 0 -1px 1px;
|
|
box-shadow:none;
|
|
&:hover {
|
|
@include box-shadow(0 0 5px darken($color-button-generic, 20%));
|
|
@include background-image(
|
|
linear-gradient(lighten($color-button-generic, 2%), darken($color-button-generic, 8%))
|
|
);
|
|
}
|
|
|
|
&:active {
|
|
@include box-shadow(inset 0 1px 3px darken($color-button-generic, 60%));
|
|
}
|
|
|
|
span {
|
|
padding-top:1px;
|
|
}
|
|
|
|
div {
|
|
background:url(../images/btn-icon/settings.png) 5px 4px no-repeat;
|
|
border-left:none;
|
|
width:100%;
|
|
}
|
|
|
|
div b {
|
|
background: url(../images/sprites-32x32/menu-arrow-deselected-down.png) no-repeat 9px 11px;
|
|
float:right;
|
|
width:24px;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/* --------------------------------------------------------
|
|
* Content Tools is the sidebar on the left of the main content
|
|
* panel
|
|
*/
|
|
.cms-content-tools {
|
|
background-color: #F1F4F5;
|
|
background: $tab-panel-texture-background; // Pages bg panel look like same as pages view
|
|
width: $grid-x * 24;
|
|
border-right: 1px solid darken($color-widget-bg, 15%);
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
z-index: 70;
|
|
@include box-shadow($color-shadow-black 0 2px 3px);
|
|
float: left;
|
|
position: relative;
|
|
|
|
&.filter{
|
|
padding:0 !important;
|
|
}
|
|
|
|
.cms-panel-header {
|
|
clear: both;
|
|
margin: 0 0 $grid-y - 1;
|
|
line-height: $grid-y * 3;
|
|
|
|
@include doubleborder(bottom, $color-light-separator, lighten($color-shadow-light, 95%));
|
|
}
|
|
|
|
.cms-panel-content {
|
|
width: ($grid-x * 22);
|
|
padding: $grid-x $grid-x 0;
|
|
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%);
|
|
@include 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-base-size + 1;
|
|
}
|
|
|
|
h4 {
|
|
font-size: $font-base-size;
|
|
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: 11px;
|
|
padding: 0 $grid-x 4px 0;
|
|
}
|
|
|
|
.middleColumn {
|
|
margin: 0;
|
|
}
|
|
|
|
input.text,
|
|
select,
|
|
textarea {
|
|
padding: 5px;
|
|
font-size: 11px;
|
|
}
|
|
|
|
&.checkbox {
|
|
padding: 0 8px 0;
|
|
|
|
input {
|
|
margin: 2px 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 {
|
|
@include border-radius(6px 0 0 6px);
|
|
}
|
|
td.last-column {
|
|
@include 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 Batch actions
|
|
*/
|
|
|
|
.cms-content-batchactions {
|
|
float: left;
|
|
position: relative;
|
|
display: block;
|
|
margin-left: 8px;
|
|
|
|
form > * {
|
|
display: block;
|
|
float: left;
|
|
}
|
|
|
|
form.cms-batch-actions {
|
|
float: left;
|
|
}
|
|
}
|
|
|
|
#Form_BatchActionsForm select {
|
|
width: 200px;
|
|
}
|
|
|
|
/** --------------------------------------------
|
|
* Preview
|
|
* -------------------------------------------- */
|
|
.cms-switch-view {
|
|
a {
|
|
padding-right: 1em;
|
|
}
|
|
}
|
|
.cms-preview {
|
|
display: none;
|
|
width: 1px; // collapsed by default
|
|
z-index: 100;
|
|
|
|
.cms-preview-toggle {
|
|
width: 10px;
|
|
cursor: pointer;
|
|
|
|
a {
|
|
display: block;
|
|
padding: 2px 12px 2px 6px;
|
|
height: 16px;
|
|
position: relative;
|
|
top: 48%;
|
|
background-color: $color-base;
|
|
color: $color-text-light;
|
|
font-weight: bold;
|
|
text-decoration: none;
|
|
z-index: 2000;
|
|
line-height: 16px;
|
|
|
|
@include border-bottom-right-radius(4px);
|
|
@include border-top-right-radius(4px);
|
|
|
|
@include box-shadow(0 0 10px rgba(180, 180,180,0.4));
|
|
}
|
|
}
|
|
|
|
&.is-collapsed {
|
|
.cms-preview-toggle {
|
|
a {
|
|
left: -15px; // point left
|
|
}
|
|
}
|
|
}
|
|
|
|
iframe {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.cms-preview-watermark {
|
|
z-index: 99;
|
|
position: fixed;
|
|
right: 60px;
|
|
top: 30px;
|
|
opacity: 0.3;
|
|
padding: .4em 1em;
|
|
cursor: default;
|
|
font-weight: bold;
|
|
text-decoration: none;
|
|
line-height: $grid-y * 2;
|
|
color: lighten($color-text-dark, 10%);
|
|
border: 1px solid #AAAAAA;
|
|
border-radius:12px;
|
|
background-color: white;
|
|
text-shadow: lighten($color-tab, 5%) 0 1px 0;
|
|
}
|
|
|
|
.cms-preview-controls {
|
|
z-index: 99;
|
|
background: $color-widget-bg;
|
|
padding: 10px;
|
|
min-height: 30px;
|
|
|
|
.cms-navigator {
|
|
width: 100%;
|
|
|
|
* {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
|
|
li{
|
|
margin: 0 2px;
|
|
}
|
|
|
|
a.disabled {
|
|
padding:.4em 1em;
|
|
color: lighten($color-text-dark, 20%);
|
|
border: 1px solid;
|
|
border-color: darken($color-button-disabled, 20%);
|
|
border-radius:12px;
|
|
cursor: default;
|
|
background:$color-base;
|
|
}
|
|
|
|
.cms-preview-states {
|
|
margin-right: 10px;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.cms-preview-popup-link {
|
|
display: inline-block;
|
|
}
|
|
|
|
.cms-preview-toggle-link {
|
|
float: right;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.cms-preview-toggle-link {
|
|
display: block;
|
|
float: right;
|
|
font-size: 12px;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.cms-preview-header {
|
|
background-color: #FFBE66;
|
|
padding: 10px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/** --------------------------------------------
|
|
* Member Profile
|
|
* -------------------------------------------- */
|
|
|
|
form.member-profile-form {
|
|
padding: 0 $grid-x*2 0 0;
|
|
.ui-tabs-nav {
|
|
margin-right:40px !important; //adds a 40px gap to the right of the tabs to match designs on main CMS
|
|
float:right;
|
|
.ui-state-active,
|
|
.ui-widget-content .ui-state-active,
|
|
.ui-widget-header .ui-state-active {
|
|
padding-bottom: 1px;
|
|
margin-bottom:-1px;
|
|
}
|
|
.ui-state-default,
|
|
.ui-widget-content .ui-state-default,
|
|
.ui-widget-header .ui-state-default {
|
|
border: {
|
|
top:none;
|
|
}
|
|
a {
|
|
padding:12px 20px 11px;
|
|
}
|
|
}
|
|
}
|
|
|
|
#Root_Permissions {
|
|
clear:both;
|
|
border-top: 1px solid darken($color-tab, 20%);
|
|
}
|
|
|
|
#Root_Main {
|
|
clear:both;
|
|
border-top: 1px solid darken($color-tab, 20%);
|
|
padding-top:$grid-y*2;
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
|
|
.ui-tabs-nav {
|
|
li {
|
|
margin:0 0 -1px 0;
|
|
}
|
|
.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr {
|
|
border-radius:0;
|
|
}
|
|
|
|
.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl {
|
|
border-radius:0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.cms {
|
|
.cms-content {
|
|
@include box-shadow(3px 0 4px rgba(0,0,0,0.15));
|
|
@include border-radius(0);
|
|
}
|
|
|
|
.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: none;
|
|
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;
|
|
}
|
|
}
|
|
|
|
.field {
|
|
.fieldholder-small { // Small fields have a second set of headers
|
|
margin-top: $grid-y;
|
|
label {
|
|
padding-top: $grid-x;
|
|
width: $grid-x * 8;
|
|
float: left;
|
|
margin-left: $grid-x * -8;
|
|
}
|
|
}
|
|
table .fieldholder-small {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
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 {
|
|
overflow: hidden;
|
|
|
|
.cms-panel-toggle {
|
|
@include box-shadow(0 0 1px rgba(107, 120, 123, 0.5));
|
|
&.south {
|
|
border-top: 1px solid $color-light-separator;
|
|
}
|
|
a {
|
|
display: block;
|
|
text-align: right;
|
|
padding: $grid-y/2 0;
|
|
width: 100%;
|
|
text-decoration: none;
|
|
span {
|
|
display: inline-block;
|
|
margin: 0 5px;
|
|
color: $color-text-dark;
|
|
font-size: 16px;
|
|
}
|
|
|
|
&.toggle-expand {
|
|
width: 40px; // will set the collapsed width
|
|
}
|
|
}
|
|
}
|
|
&.cms-content-tools .cms-panel-toggle {
|
|
&.south {
|
|
border-top: 1px solid #FFF;
|
|
}
|
|
}
|
|
|
|
&.collapsed {
|
|
|
|
cursor: pointer;
|
|
|
|
.cms-panel-header * {
|
|
display: none;
|
|
}
|
|
|
|
.cms-panel-content {
|
|
display: none;
|
|
}
|
|
|
|
//.cms-panel-header {
|
|
// @include rotate(-90deg);
|
|
// position: relative;
|
|
// top: $grid-y * 10;
|
|
// border: none;
|
|
// padding: 0;
|
|
//}
|
|
|
|
}
|
|
|
|
.cms-panel-header {
|
|
width: 100%;
|
|
}
|
|
|
|
&#cms-content-tools-CMSPageEditController {
|
|
.cms-panel-content-collapsed {
|
|
width: 40px;
|
|
display: none; // Avoids FOUC
|
|
|
|
h2, h3 {
|
|
border-bottom: 0;
|
|
margin-left: $grid-y;
|
|
@include transform-origin(bottom, right);
|
|
@include rotate(270deg);
|
|
}
|
|
.cms-panel-header {
|
|
width: 600px;
|
|
position:relative;
|
|
top:24px;
|
|
right:577px;
|
|
text-align:right;
|
|
}
|
|
}
|
|
}
|
|
|
|
.cms-panel-content-collapsed {
|
|
width: 40px;
|
|
display: none; // Avoids FOUC
|
|
|
|
h2, h3 {
|
|
border-bottom: 0;
|
|
margin-left: $grid-y;
|
|
@include transform-origin(bottom, right);
|
|
@include rotate(270deg);
|
|
}
|
|
.cms-panel-header {
|
|
width: 600px;
|
|
position:relative;
|
|
right:577px;
|
|
text-align:right;
|
|
border-bottom:none;
|
|
box-shadow:none;
|
|
}
|
|
}
|
|
|
|
.child-flyout-indicator {
|
|
width:0;
|
|
height:0;
|
|
border-right:3px dashed $color-text-dark;
|
|
border-top:3px solid transparent;
|
|
border-left:3px solid transparent;
|
|
border-bottom:3px dashed $color-text-dark;
|
|
position: absolute;
|
|
right: 1px;
|
|
margin-top: -8px;
|
|
display: none; /* To be shown by javascript, see LeftAndMain.Panel.js */
|
|
}
|
|
|
|
.collapsed-flyout {
|
|
display: block !important;
|
|
left: 41px;
|
|
margin-top: -40px;
|
|
position: fixed;
|
|
width: 191px;
|
|
|
|
li a span {
|
|
display: block !important;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.cms {
|
|
.cms-panel-padded {
|
|
padding: $grid-y*2 $grid-x*2;
|
|
margin:0;
|
|
}
|
|
}
|
|
|
|
/** ------------------------------------------------------------------
|
|
* 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{
|
|
min-width:570px;
|
|
.htmleditorfield-dialog{
|
|
min-width:570px;
|
|
}
|
|
.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: url("../images/textures/bg_cms_main_content.png") repeat left top #F0F3F4;
|
|
border: 3px solid #000 !important;
|
|
border-radius: $grid-y;
|
|
overflow: visible;
|
|
padding: 0;
|
|
|
|
// Titlebar for pop-up dialog.
|
|
.ui-dialog-titlebar.ui-widget-header {
|
|
font-size: $font-base-size+2;
|
|
padding: 0;
|
|
border:none;
|
|
background: {
|
|
color:transparent;
|
|
image:url(../images/textures/cms_content_header.png);
|
|
repeat:repeat;
|
|
}
|
|
@include box-shadow($color-shadow-dark 0 0 ($grid-x / 2) inset);
|
|
.ui-dialog-title {
|
|
position:absolute;
|
|
}
|
|
}
|
|
|
|
.cms-dialog-content {
|
|
background: url("../images/textures/bg_cms_main_content.png") repeat left top #F0F3F4;
|
|
padding-bottom: $grid-y;
|
|
padding-top:0px;
|
|
|
|
.Actions {
|
|
overflow: auto;
|
|
margin: $grid-y 0;
|
|
padding-bottom: $grid-y;
|
|
float: right;
|
|
}
|
|
|
|
.cms-tabset {
|
|
@include border-radius(none);
|
|
|
|
.tab {
|
|
background: none;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
&.ui-tabs {
|
|
background: none;
|
|
|
|
.ui-tabs-nav {
|
|
border: none;
|
|
padding: 0 $grid-x*5 0 0; //allows for 40px gap to the right of tabs to match the tabs on main CMS
|
|
float:right;
|
|
|
|
li {
|
|
margin:0;
|
|
&.ui-tabs-selected {
|
|
margin-bottom: -1px;
|
|
padding-bottom:11px;
|
|
}
|
|
|
|
&:first-child {
|
|
margin-left: 15px;
|
|
}
|
|
font-weight: bold;
|
|
line-height: 16px;
|
|
padding: 12px 12px 10px;
|
|
border-bottom: 2px solid #B3B3B3;
|
|
}
|
|
|
|
.ui-state-focus a {
|
|
outline:none;
|
|
}
|
|
|
|
.ui-state-default,
|
|
.ui-widget-content .ui-state-default,
|
|
.ui-widget-header .ui-state-default {
|
|
background-color: $color-base;
|
|
@include background-image(
|
|
linear-gradient($color-base, darken($color-base, 12%))
|
|
);
|
|
|
|
border: {
|
|
right-color: darken($color-tab, 20%);
|
|
left-color: $color-tab;
|
|
bottom:none;
|
|
top:none;
|
|
}
|
|
text-shadow: lighten($color-tab, 60%) 0 1px 0;
|
|
}
|
|
|
|
.ui-state-active,
|
|
.ui-widget-content .ui-state-active,
|
|
.ui-widget-header .ui-state-active {
|
|
background: $color-widget-bg;
|
|
border: {
|
|
right-color: darken($color-tab, 20%);
|
|
left-color: darken($color-tab, 20%);
|
|
}
|
|
margin-right:-1px;
|
|
margin-left:-3px;
|
|
z-index:2;
|
|
|
|
a {
|
|
border: {
|
|
bottom:none;
|
|
top:none;
|
|
}
|
|
|
|
}
|
|
}
|
|
.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr {
|
|
border-radius:0;
|
|
}
|
|
|
|
.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl {
|
|
border-radius:0;
|
|
}
|
|
}
|
|
|
|
|
|
.ui-tabs-panel {
|
|
background: url("../images/textures/bg_cms_main_content.png") repeat left top #F0F3F4;
|
|
overflow-x:hidden;
|
|
clear:both;
|
|
border-top: 1px solid darken($color-tab, 20%);
|
|
}
|
|
}
|
|
}
|
|
.clear {
|
|
clear: both;
|
|
}
|
|
|
|
}
|
|
|
|
&.loading {
|
|
background-image: url(../images/spinner.gif);
|
|
background-position: 50% 50%;
|
|
background-repeat: no-repeat;
|
|
}
|
|
}
|
|
|
|
body.cms-dialog {
|
|
overflow: auto;
|
|
background: url("../images/textures/bg_cms_main_content.png") repeat left top #F0F3F4;
|
|
position:relative;
|
|
}
|
|
|
|
/** --------------------------------------------
|
|
* "Insert X" forms
|
|
* -------------------------------------------- */
|
|
.htmleditorfield-dialog{
|
|
&.ui-dialog-content{
|
|
padding:0;
|
|
position:relative;
|
|
}
|
|
|
|
#MediaFormInsertMediaTabs_Fromtheweb{
|
|
.CompositeField{
|
|
@include clearfix;
|
|
}
|
|
#RemoteURL{
|
|
border:none;
|
|
@include box-shadow-none;
|
|
width:55%;
|
|
max-width:512px;
|
|
float:left;
|
|
position: relative;
|
|
|
|
label {
|
|
position: absolute;
|
|
left: 8px;
|
|
top: 13px;
|
|
font-weight: normal; color: #888;
|
|
}
|
|
|
|
.middleColumn {
|
|
margin-left: 0;
|
|
}
|
|
|
|
input.remoteurl {
|
|
padding-left: 40px;
|
|
}
|
|
}
|
|
button.add-url{
|
|
margin-top:13px;
|
|
padding-top:15px;
|
|
@include clearfix;
|
|
border:none;
|
|
background:none;
|
|
opacity:0.8;
|
|
cursor: hand;
|
|
.btn-icon-addMedia{
|
|
width:20px;
|
|
height:20px;
|
|
}
|
|
&:hover, &:active{
|
|
border:none;
|
|
@include box-shadow-none;
|
|
opacity:1;
|
|
}
|
|
&.ui-state-disabled {
|
|
&, &:hover, &:active {
|
|
opacity: 0.35;
|
|
filter: Alpha(Opacity=35);
|
|
}
|
|
}
|
|
}
|
|
|
|
.loading button.add-url .ui-icon {
|
|
background-image: url(../images/throbber.gif);
|
|
background-position: 50% 50%;
|
|
background-repeat: no-repeat;
|
|
}
|
|
}
|
|
|
|
.cms-content-header{
|
|
padding:0;
|
|
width:100%;
|
|
height: 40px;
|
|
h3{
|
|
padding: 0 8px;
|
|
margin: 10px;
|
|
}
|
|
}
|
|
.ui-tabs{
|
|
position:static;
|
|
ul.ui-tabs-nav{
|
|
float:right;
|
|
position:absolute;
|
|
top:0;
|
|
right: 40px;
|
|
li{
|
|
background-color:#92A6B3;
|
|
@include background-image(
|
|
linear-gradient(#B0BEC7, #8CA1AE)
|
|
);
|
|
@include border-radius(0px);
|
|
padding-top: 10px;
|
|
height: 28px;
|
|
overflow:hidden;
|
|
font-weight:bold;
|
|
a{
|
|
color:#fff;
|
|
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
|
|
display:block;
|
|
height:100%;
|
|
}
|
|
&.ui-state-active{
|
|
background: #F0F3F4 url("../admin/images/textures/bg_cms_main_content.png") repeat left top;
|
|
a{
|
|
color:$color-text;
|
|
text-shadow: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.ui-tabs-panel{
|
|
padding:0;
|
|
}
|
|
}
|
|
.ss-insert-media, .Actions, .ss-insert-link{
|
|
padding:$grid-y $grid-x*2 ;
|
|
}
|
|
.details{
|
|
.file-url{
|
|
display:block;
|
|
width:450px;
|
|
@include hide-text-overflow;
|
|
}
|
|
.cms-file-info{
|
|
.field{
|
|
border:none;
|
|
@include box-shadow(0 0 0 rgba(0, 0, 0, 0));
|
|
}
|
|
}
|
|
.field{
|
|
border-bottom: 1px solid $color-shadow-light;
|
|
@include box-shadow(0 1px 0 lighten($color-shadow-light, 95%));
|
|
&.last{
|
|
border-bottom:none;
|
|
@include box-shadow(0 0 0 rgba(0, 0, 0, 0));
|
|
margin-bottom:0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.htmleditorfield-linkform {
|
|
.step2 {
|
|
margin-bottom: $grid-x*2;
|
|
}
|
|
}
|
|
|
|
.htmleditorfield-mediaform {
|
|
.ss-gridfield {
|
|
// Set thumbnail size
|
|
tbody td:first-child img {
|
|
max-height: 30px;
|
|
}
|
|
}
|
|
|
|
.ss-uploadfield{
|
|
&.from-web, &.from-CMS{
|
|
margin-bottom:48px;
|
|
.middleColumn {
|
|
width:auto;
|
|
background:none;
|
|
border:none;
|
|
margin-top:13px;
|
|
}
|
|
}
|
|
|
|
&.from-CMS{
|
|
margin-top:33px;
|
|
h4{
|
|
margin-top:3px;
|
|
}
|
|
.middleColumn {
|
|
margin-top:0;
|
|
.TreeDropdownField{
|
|
margin-top:23px;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.ss-uploadfield-editandorganize {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/** --------------------------------------------
|
|
* Search forms (used in AssetAdmin, ModelAdmin, etc)
|
|
* -------------------------------------------- */
|
|
.cms-search-form {
|
|
margin-bottom: $grid-y*2;
|
|
.filter &{
|
|
margin-bottom:0;
|
|
}
|
|
}
|
|
|
|
/** --------------------------------------------
|
|
* Step labels
|
|
* -------------------------------------------- */
|
|
.step-label {
|
|
|
|
& > * {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.flyout {
|
|
height: 26px - 2*4px; // minus padding
|
|
font-size: $font-base-size+2;
|
|
font-weight: bold;
|
|
@include border-top-left-radius(3px);
|
|
@include 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;
|
|
background: sprite($sprites32, numeric-label) no-repeat;
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.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;
|
|
@include 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"
|
|
}
|
|
}
|
|
.cms-file-info-data {
|
|
float: left;
|
|
|
|
.field {
|
|
// Unsetting styles from .field, make it more compact visually
|
|
margin-bottom: 0;
|
|
padding-bottom: $grid-x;
|
|
border: none;
|
|
box-shadow: none;
|
|
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 {
|
|
margin-top:$grid-y*2;
|
|
span.btn-icon-download-csv {
|
|
height:17px; //exact height of icon
|
|
}
|
|
.ui-button-text {
|
|
padding-left:26px; //to accomodate wider export 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?
|
|
|
|
.cms-edit-form {
|
|
background:darken($color-widget-bg, 2%);
|
|
|
|
.ui-tabs-nav {
|
|
.ui-state-active,
|
|
.ui-widget-content .ui-state-active,
|
|
.ui-widget-header .ui-state-active {
|
|
background:darken($color-widget-bg, 2%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.ui-tabs-nav ~ .ui-tabs-panel {
|
|
background: darken($color-widget-bg, 2%);
|
|
border-top:1px solid $color-button-generic-border;
|
|
clear: both;
|
|
}
|
|
|
|
&.ss-tabset-tabshidden .ui-tabs-panel {
|
|
border-top: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
/** --------------------------------------------
|
|
* Page Settings Controller
|
|
* -------------------------------------------- */
|
|
|
|
.cms-container .CMSMain.CMSPageSettingsController {
|
|
.tab#Root_Settings {
|
|
.optionset li {
|
|
white-space:nowrap;
|
|
padding-top:$grid-y;
|
|
label {
|
|
padding-left:2px;
|
|
}
|
|
}
|
|
.fieldgroup .fieldgroup-field {
|
|
width:$grid-x*27;
|
|
padding-left:0;
|
|
}
|
|
.TreeDropdownField .treedropdownfield-toggle-panel-link {
|
|
border-left:none;
|
|
background:none;
|
|
background-image:none;
|
|
}
|
|
}
|
|
}
|
|
|
|
/** --------------------------------------------
|
|
* Buttons for FileUpload
|
|
* -------------------------------------------- */
|
|
.ss-uploadfield-item-edit-all .ui-button-text{
|
|
padding-right:0;
|
|
}
|
|
|
|
.toggle-details-icon {
|
|
background: sprite($sprites32, menu-arrow-down) no-repeat;
|
|
.ss-uploadfield-item-edit-all &{
|
|
background: sprite($sprites32, menu-arrow-deselected-down) no-repeat;
|
|
display:inline-block;
|
|
width:8px;
|
|
height:8px;
|
|
padding-left:5px;
|
|
}
|
|
|
|
&.opened {
|
|
background: sprite($sprites32, menu-arrow-up) no-repeat;
|
|
.ss-uploadfield-item-edit-all &{
|
|
background: sprite($sprites32, menu-arrow-deselected-up) no-repeat;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|