Merge pull request #117 from robbieaverill/feature/webpack-scss

NEW Replace Compass with Webpack, update docs, remove unused @includes
This commit is contained in:
sachajudd 2017-05-10 10:27:11 +12:00 committed by GitHub
commit 6b80f32832
18 changed files with 1035 additions and 763 deletions

4
.gitignore vendored
View File

@ -1,2 +1,2 @@
.sass-cache node_modules/
.DS_Store npm-debug.log

View File

@ -78,7 +78,7 @@ class DMSDocumentAddController extends LeftAndMain
{ {
Requirements::javascript(FRAMEWORK_DIR . '/javascript/AssetUploadField.js'); Requirements::javascript(FRAMEWORK_DIR . '/javascript/AssetUploadField.js');
Requirements::css(FRAMEWORK_DIR . '/css/AssetUploadField.css'); Requirements::css(FRAMEWORK_DIR . '/css/AssetUploadField.css');
Requirements::css(DMS_DIR . '/css/DMSMainCMS.css'); Requirements::css(DMS_DIR . '/dist/css/cmsbundle.css');
/** @var SiteTree $page */ /** @var SiteTree $page */
$page = $this->currentPage(); $page = $this->currentPage();

View File

@ -892,8 +892,8 @@ class DMSDocument extends DataObject implements DMSDocumentInterface
public function getCMSFields() public function getCMSFields()
{ {
//include JS to handling showing and hiding of bottom "action" tabs //include JS to handling showing and hiding of bottom "action" tabs
Requirements::javascript(DMS_DIR.'/javascript/DMSDocumentCMSFields.js'); Requirements::javascript(DMS_DIR . '/javascript/DMSDocumentCMSFields.js');
Requirements::css(DMS_DIR.'/css/DMSDocumentCMSFields.css'); Requirements::css(DMS_DIR . '/dist/css/cmsbundle.css');
$fields = new FieldList(); //don't use the automatic scaffolding, it is slow and unnecessary here $fields = new FieldList(); //don't use the automatic scaffolding, it is slow and unnecessary here

View File

@ -143,7 +143,7 @@ class DMSDocumentSet extends DataObject
// Javascript to customize the grid field for the DMS document (overriding entwine // Javascript to customize the grid field for the DMS document (overriding entwine
// in FRAMEWORK_DIR.'/javascript/GridField.js' // in FRAMEWORK_DIR.'/javascript/GridField.js'
Requirements::javascript(DMS_DIR . '/javascript/DMSGridField.js'); Requirements::javascript(DMS_DIR . '/javascript/DMSGridField.js');
Requirements::css(DMS_DIR . '/css/DMSMainCMS.css'); Requirements::css(DMS_DIR . '/dist/css/dmsbundle.css');
// Javascript for the link editor pop-up in TinyMCE // Javascript for the link editor pop-up in TinyMCE
Requirements::javascript(DMS_DIR . '/javascript/DocumentHtmlEditorFieldToolbar.js'); Requirements::javascript(DMS_DIR . '/javascript/DocumentHtmlEditorFieldToolbar.js');

View File

@ -1,20 +0,0 @@
# Require any additional compass plugins here.
require 'compass-colors'
project_type = :stand_alone
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "css"
sass_dir = "scss"
images_dir = "images"
javascripts_dir = "javascript"
output_style = :compact
# To enable relative paths to assets via compass helper functions. Uncomment:
relative_assets = true
# disable comments in the output. We want admin comments
# to be verbose
line_comments = false
asset_cache_buster :none

View File

@ -1,62 +0,0 @@
form.small .field input.text, form.small .field textarea, form.small .field select, form.small .field .TreeDropdownField, .field.small input.text, .field.small textarea, .field.small select, .field.small .TreeDropdownField { width: 100%; }
#FileP .fieldgroup-field { width: 100%; }
#FileP .fieldgroup-field .cms-file-info-preview { box-shadow: none; }
#FileP .fieldgroup-field .cms-file-info-data { width: 400px; }
#FileP .fieldgroup-field .fieldholder-small { margin-top: 5px; }
#FileP .fieldgroup-field .fieldholder-small label { width: auto; margin-left: 0; padding-top: 0; margin-right: 10px; font-weight: bold; float: left; }
#FileP .fieldgroup-field .fieldholder-small .readonly { font-style: italic; color: #666; }
#DocumentTypeID .middleColumn { overflow: auto; min-width: 800px; }
#DocumentTypeID .middleColumn ul { padding: 0; }
#DocumentTypeID .middleColumn ul input[type="radio"] { display: none; }
#DocumentTypeID .middleColumn ul li { display: table; padding: 0; width: 125px; height: 40px; white-space: normal; margin-right: -1px; border-radius: 0; }
#DocumentTypeID .middleColumn ul li:first-child { border-radius: 6px 0 0 6px; border-left: 1px solid #C0C0C2; }
#DocumentTypeID .middleColumn ul li:last-child { border-radius: 0 6px 6px 0; }
#DocumentTypeID .middleColumn ul li.selected, .ie8 #DocumentTypeID .middleColumn ul li.selected { border-bottom: 1px solid #C0C0C2; background: -moz-linear-gradient(#c0c0c0, #e6e6e6); background: -webkit-linear-gradient(#c0c0c0, #e6e6e6); background: linear-gradient(#c0c0c0, #e6e6e6); background-color: silver; filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#C0C0C2', endColorstr='#E6E6E6'); /* IE6 & IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#C0C0C2', endColorstr='#E6E6E6')"; /* IE8 */ box-shadow: 0 1px 1px 0 #A0A0A0 inset; }
#DocumentTypeID .middleColumn ul li.selected :after, .ie8 #DocumentTypeID .middleColumn ul li.selected :after { box-shadow: 0 1px 1px 0 #DDD; }
#DocumentTypeID .middleColumn ul li label { display: table-cell; vertical-align: middle; text-align: center; padding: 0 10px; }
#Actions { box-shadow: none; border: none; padding: 0; }
#Actions li { margin-left: 2px; }
#Actions li:first-child { margin-left: 0; }
#Actions li.delete-button-appended { display: inline-block; position: relative; margin-left: 0; }
#Actions li.dms-active { border-bottom: 1px solid #C0C0C2; background: -moz-linear-gradient(#c0c0c0, #e6e6e6); background: -webkit-linear-gradient(#c0c0c0, #e6e6e6); background: linear-gradient(#c0c0c0, #e6e6e6); background-color: silver; filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#C0C0C2', endColorstr='#E6E6E6'); /* IE6 & IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#C0C0C2', endColorstr='#E6E6E6')"; /* IE8 */ box-shadow: 0 1px 1px 0 #A0A0A0 inset; }
#Actions li.dms-active:after { content: ''; display: block; position: absolute; top: 33px; left: 50%; margin-left: -6px; width: 12px; height: 12px; background: #F8F8F8; border-right: 1px solid #B3B3B3; border-top: 1px solid #B3B3B3; -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); pointer-events: none; z-index: 10; }
.DMSDocumentActionsPanel { /*.middleColumn{
margin-left:184px;
width: 510px;
form.small &{
margin-left: 120px;
}
}
*/ /*label.fieldholder-small-label{
display: none;
}*/ }
.DMSDocumentActionsPanel .fieldgroup { display: none; float: none; width: auto; background: #f8f8f8; padding: 15px; border: 1px solid #d0d3d5; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
.DMSDocumentActionsPanel .fieldgroup .fieldholder-small label { float: none; width: auto; margin: 0; padding: 0; }
.DMSDocumentActionsPanel .fieldgroup .fieldholder-small label.ss-ui-button { float: left; margin: 0 10px 0 0; }
.DMSDocumentActionsPanel .fieldgroup .embargo li, .DMSDocumentActionsPanel .fieldgroup .expiry li { float: none; width: 100%; margin-left: 8px; }
.DMSDocumentActionsPanel .fieldgroup .embargo li label, .DMSDocumentActionsPanel .fieldgroup .expiry li label { padding-left: 10px; }
.DMSDocumentActionsPanel .fieldgroup .embargo .embargoDatetime, .DMSDocumentActionsPanel .fieldgroup .embargo .expiryDatetime, .DMSDocumentActionsPanel .fieldgroup .expiry .embargoDatetime, .DMSDocumentActionsPanel .fieldgroup .expiry .expiryDatetime { margin-top: 0; margin-left: 34px; overflow: hidden; }
.DMSDocumentActionsPanel .fieldgroup .embargo .embargoDatetime .field.date, .DMSDocumentActionsPanel .fieldgroup .embargo .embargoDatetime .field.time, .DMSDocumentActionsPanel .fieldgroup .embargo .expiryDatetime .field.date, .DMSDocumentActionsPanel .fieldgroup .embargo .expiryDatetime .field.time, .DMSDocumentActionsPanel .fieldgroup .expiry .embargoDatetime .field.date, .DMSDocumentActionsPanel .fieldgroup .expiry .embargoDatetime .field.time, .DMSDocumentActionsPanel .fieldgroup .expiry .expiryDatetime .field.date, .DMSDocumentActionsPanel .fieldgroup .expiry .expiryDatetime .field.time { display: inline-block; width: auto; margin: 0; padding: 0; }
.DMSDocumentActionsPanel .fieldgroup .embargo .embargoDatetime .field.date .middleColumn, .DMSDocumentActionsPanel .fieldgroup .embargo .expiryDatetime .field.date .middleColumn, .DMSDocumentActionsPanel .fieldgroup .expiry .embargoDatetime .field.date .middleColumn, .DMSDocumentActionsPanel .fieldgroup .expiry .expiryDatetime .field.date .middleColumn { background: url("../images/calendar-month.png") 90px 7px no-repeat; overflow: hidden; }
.DMSDocumentActionsPanel .fieldgroup .embargo .embargoDatetime .field.time .middleColumn, .DMSDocumentActionsPanel .fieldgroup .embargo .expiryDatetime .field.time .middleColumn, .DMSDocumentActionsPanel .fieldgroup .expiry .embargoDatetime .field.time .middleColumn, .DMSDocumentActionsPanel .fieldgroup .expiry .expiryDatetime .field.time .middleColumn { background: url("../images/clock-frame.png") 90px 7px no-repeat; overflow: hidden; }
.DMSDocumentActionsPanel .fieldgroup .embargo .embargoDatetime .middleColumn, .DMSDocumentActionsPanel .fieldgroup .embargo .expiryDatetime .middleColumn, .DMSDocumentActionsPanel .fieldgroup .expiry .embargoDatetime .middleColumn, .DMSDocumentActionsPanel .fieldgroup .expiry .expiryDatetime .middleColumn { margin-left: 0; width: auto; border: none; }
.DMSDocumentActionsPanel .fieldgroup .embargo .embargoDatetime .middleColumn input, .DMSDocumentActionsPanel .fieldgroup .embargo .expiryDatetime .middleColumn input, .DMSDocumentActionsPanel .fieldgroup .expiry .embargoDatetime .middleColumn input, .DMSDocumentActionsPanel .fieldgroup .expiry .expiryDatetime .middleColumn input { width: 80px; margin-right: 40px; }
.DMSDocumentActionsPanel #Embargo { border: none; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; }
.DMSDocumentActionsPanel .ss-uploadfield-files .ss-uploadfield-item-preview { background: url("../images/app_icons/generic_32.png") -10px -6px no-repeat; }
.DMSDocumentActionsPanel .ss-uploadfield-files .ss-uploadfield-item-name span.name { width: 260px; }
.DMSDocumentActionsPanel .ss-uploadfield-files .ss-uploadfield-item-actions .ss-uploadfield-item-cancel { width: auto; text-indent: 0; }
.DMSDocumentActionsPanel .ss-uploadfield-files .ss-uploadfield-item-actions .ss-uploadfield-item-cancel .btn-icon-deleteLight { background-position: 0 -128px; display: inline-block; }
.DMSDocumentActionsPanel .ss-uploadfield-files .ss-uploadfield-item-actions .ss-uploadfield-item-cancel .ui-button-text { display: block; position: relative; float: right; color: #555; padding: 0; padding-left: 2em; }
.DMSDocumentActionsPanel > .fieldgroup.middleColumn { overflow: hidden; display: block; }
.DMSDocumentActionsPanel > .fieldgroup.middleColumn .fieldgroup-field { width: 100%; }
#Form_ItemEditForm fieldset table.ss-gridfield-table { width: 494px; }
#Form_ItemEditForm fieldset table.ss-gridfield-table tr th.main { min-width: 175px; }
#Form_ItemEditForm fieldset table.ss-gridfield-table tr th.main.col-action_SetOrderID { width: 60px; min-width: 60px; }
#Form_ItemEditForm fieldset table.ss-gridfield-table tr td { white-space: normal; }
#ui-datepicker-div { border: 1px solid #DDD; }

View File

@ -1,70 +0,0 @@
.ui-autocomplete { border: 1px solid #DDD; box-shadow: 0 1px 2px 0px #AFAFAF; max-height: 300px; overflow: scroll; }
.cms fieldset.documents table td, .cms fieldset.relatedLinks table td { white-space: normal; }
.cms fieldset.documents table td.col-buttons, .cms fieldset.relatedLinks table td.col-buttons { white-space: nowrap; }
.cms fieldset.documents table td.col-buttons .dms-delete-link-only .ui-icon, .cms fieldset.relatedLinks table td.col-buttons .dms-delete-link-only .ui-icon { background: url(../images/chain-unchain.png) no-repeat; }
.cms fieldset.documents table tr.dms-document-hidden-row.odd, .cms fieldset.relatedLinks table tr.dms-document-hidden-row.odd { background-color: rgba(241, 220, 222, 0.6); }
.cms fieldset.documents table tr.dms-document-hidden-row.even, .cms fieldset.relatedLinks table tr.dms-document-hidden-row.even { background-color: rgba(242, 201, 203, 0.675); }
.cms fieldset.documents table tr.dms-document-hidden-row:hover, .cms fieldset.relatedLinks table tr.dms-document-hidden-row:hover { background-color: rgba(244, 171, 172, 0.8) !important; }
.DMSDocumentAddController .ui-tabs ul.ui-tabs-nav { border-bottom: none; float: right; margin: 8px 0 -1px 0; padding: 0 24px 0 0; }
.DMSDocumentAddController .ui-tabs ul.ui-tabs-nav li { padding-bottom: 1px; border: 1px solid #C0C0C2; }
.DMSDocumentAddController .ui-tabs ul.ui-tabs-nav li a { padding: 8px 20px 8px; }
.ss-add .document-add-existing input.document-autocomplete { position: absolute; z-index: 9999; width: 390px; padding: 9px 7px; border-bottom-right-radius: 0; border-top-right-radius: 0; outline: none; box-sizing: border-box; -moz-box-sizing: border-box; }
.ss-add .document-add-existing input.document-autocomplete[disabled] { color: #C0C0C2; text-shadow: 0 -1px 0 #FFF; background: #EEE; background-image: none; box-shadow: inset 0 1px 8px 0 #C4C4C4; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.ss-add .document-add-existing .TreeDropdownField { border: none; width: 100%; max-width: 512px; box-sizing: border-box; cursor: pointer; }
.ss-add .document-add-existing .treedropdownfield-toggle-panel-link { padding: 5px 9px 9px; background: #fff; border: 1px solid #B3B3B3; float: right; z-index: 99999; position: relative; }
.ss-add .document-add-existing .treedropdownfield-toggle-panel-link.treedropdownfield-open-tree { background: #fff; border: 1px solid #B3B3B3; border-bottom: none; border-bottom-right-radius: 0; }
.ss-add .document-add-existing .treedropdownfield-title { width: auto; }
.ss-add .document-add-existing .treedropdownfield-toggle-panel-link a { display: inline-block; top: 4px; position: relative; }
.ss-add .document-add-existing .document-list { width: 510px; border: 1px solid #DDD; border-top: none; background: #ffffff; display: none; box-shadow: 0 2px 4px 1px #DDD; max-height: 300px; border-radius: 6px; background-clip: padding-box; overflow: scroll; }
.ss-add .document-add-existing .document-list p { padding: 10px 10px 0; }
.ss-add .document-add-existing .document-list ul { padding: 4px 0; }
.ss-add .document-add-existing .document-list ul li { line-height: 18px; }
.ss-add .document-add-existing .document-list ul li a { display: block; padding: 4px 8px; border: 1px solid #FFF; color: black; }
.ss-add .document-add-existing .document-list ul li a:hover { border: 1px solid #CCC; border-radius: 4px; background: rgba(203, 203, 203, 0.4); cursor: pointer; text-decoration: none; outline: none; text-shadow: none; }
.ss-add .document-add-existing.link-editor-context label { float: left; display: block; width: 176px; padding: 8px 8px 8px 0; line-height: 16px; font-weight: bold; text-shadow: 1px 1px 0 white; }
.ss-add .document-add-existing.link-editor-context .middleColumn { margin-left: 184px; }
.ss-add .document-add-existing.link-editor-context .middleColumn input { background: white; border: 1px solid #B3B3B3; line-height: 16px; margin: 0; border-radius: 4px; background-size: 100%; max-width: 512px; }
.ss-add .ss-assetuploadfield.link-editor-context label { float: left; display: block; width: 176px; padding: 8px 8px 8px 0; line-height: 16px; font-weight: bold; text-shadow: 1px 1px 0 white; }
.ss-add .ss-assetuploadfield.link-editor-context .middleColumn { margin-left: 184px; display: block; padding: 8px 8px 8px 0; font-style: italic; min-height: 20px; }
.ss-add .ss-assetuploadfield .step4 { margin-bottom: 10px; }
.cms .ss-add .treedropdownfield-panel, .cms .selectiongroup .treedropdownfield-panel { margin: -1px 0 0 0; box-sizing: border-box; }
.cms .ss-add .treedropdownfield-panel ul, .cms .selectiongroup .treedropdownfield-panel ul { padding: 4px 0; }
.cms .ss-add .treedropdownfield-panel ul li, .cms .selectiongroup .treedropdownfield-panel ul li { border: 1px solid #ffffff; }
.cms .ss-add .treedropdownfield-panel ul li a, .cms .selectiongroup .treedropdownfield-panel ul li a { display: block; padding: 4px 2px; }
.cms .ss-add .treedropdownfield-panel ul li a.jstree-hovered, .cms .selectiongroup .treedropdownfield-panel ul li a.jstree-hovered { background: rgba(203, 203, 203, 0.4); border: 1px solid #CCC; }
@-moz-document url-prefix() { .ss-add .document-add-existing input { padding: 10px 7px; } }
#Form_EditForm_Documents { padding: 1em 0; }
#Form_EditForm_Documents input[name="filter[LastChanged]"] { display: none; }
#Form_EditForm_RelatedLinks table { padding: 1em 0; }
#Form_EditForm_RelatedLinks table thead h2 { display: none; }
#SectionID .middleColumn, #DocumentTypeID .middleColumn { overflow: auto; min-width: 800px; }
#SectionID .middleColumn ul, #DocumentTypeID .middleColumn ul { padding: 0; }
#SectionID .middleColumn ul input[type="radio"], #DocumentTypeID .middleColumn ul input[type="radio"] { display: none; }
#SectionID .middleColumn ul li, #DocumentTypeID .middleColumn ul li { display: table; padding: 0; width: 125px; height: 40px; white-space: normal; margin-right: -1px; border-radius: 0; }
#SectionID .middleColumn ul li:first-child, #DocumentTypeID .middleColumn ul li:first-child { border-radius: 6px 0 0 6px; border-left: 1px solid #C0C0C2; }
#SectionID .middleColumn ul li:last-child, #DocumentTypeID .middleColumn ul li:last-child { border-radius: 0 6px 6px 0; }
#SectionID .middleColumn ul li.selected, .ie8 #SectionID .middleColumn ul li.selected, #DocumentTypeID .middleColumn ul li.selected, .ie8 #DocumentTypeID .middleColumn ul li.selected { border-bottom: 1px solid #C0C0C2; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #c0c0c0), color-stop(100%, #e6e6e6)); background: -webkit-linear-gradient(#c0c0c0, #e6e6e6); background: -moz-linear-gradient(#c0c0c0, #e6e6e6); background: -o-linear-gradient(#c0c0c0, #e6e6e6); background: linear-gradient(#c0c0c0, #e6e6e6); background-color: silver; filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#C0C0C2', endColorstr='#E6E6E6'); /* IE6 & IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#C0C0C2', endColorstr='#E6E6E6')"; /* IE8 */ box-shadow: 0 1px 1px 0 #A0A0A0 inset; }
#SectionID .middleColumn ul li.selected :after, .ie8 #SectionID .middleColumn ul li.selected :after, #DocumentTypeID .middleColumn ul li.selected :after, .ie8 #DocumentTypeID .middleColumn ul li.selected :after { box-shadow: 0 1px 1px 0 #DDD; }
#SectionID .middleColumn ul li label, #DocumentTypeID .middleColumn ul li label { display: table-cell; vertical-align: middle; text-align: center; padding: 0 10px; }
#Form_ItemEditForm h3:first-child { display: inline-block; float: left; width: 184px; }
#Form_ItemEditForm ul.SelectionGroup { display: inline-block; position: relative; padding: 0; margin-top: 9px; margin-left: 0; height: 110px; background: none; border: none; }
#Form_ItemEditForm ul.SelectionGroup li { width: auto; clear: none; display: inline; margin-right: 4px; }
#Form_ItemEditForm ul.SelectionGroup li input.selector { display: none; }
#Form_ItemEditForm ul.SelectionGroup li label.ui-button { background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background: -webkit-linear-gradient(#ffffff, #d9d9d9); background: -moz-linear-gradient(#ffffff, #d9d9d9); background: -o-linear-gradient(#ffffff, #d9d9d9); background: linear-gradient(#ffffff, #d9d9d9); font-weight: bold; border: 1px solid #C0C0C2; border-radius: 3px; padding: 0.8em 1.5em; }
#Form_ItemEditForm ul.SelectionGroup li label.ui-button:hover { box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); }
#Form_ItemEditForm ul.SelectionGroup li div.field { margin-left: 0px; margin-bottom: 1em; width: 600px; position: absolute; left: 0; margin-top: 13px; padding: 10px; background: white; border: 1px solid #B3B3B3; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #efefef), color-stop(10%, #ffffff), color-stop(90%, #ffffff), color-stop(100%, #efefef)); background-image: -webkit-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: -moz-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: -o-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); }
#Form_ItemEditForm ul.SelectionGroup li.selected label.ui-button { border-bottom: 1px solid #C0C0C2; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #c0c0c0), color-stop(100%, #e6e6e6)); background: -webkit-linear-gradient(#c0c0c0, #e6e6e6); background: -moz-linear-gradient(#c0c0c0, #e6e6e6); background: -o-linear-gradient(#c0c0c0, #e6e6e6); background: linear-gradient(#c0c0c0, #e6e6e6); background-color: silver; filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#C0C0C2', endColorstr='#E6E6E6'); /* IE6 & IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#C0C0C2', endColorstr='#E6E6E6')"; /* IE8 */ box-shadow: 0 1px 1px 0 #A0A0A0 inset; }
#Form_ItemEditForm ul.SelectionGroup li.selected label.ui-button:after { content: ''; display: block; position: absolute; top: 33px; left: 50%; margin-left: -6px; width: 12px; height: 12px; background: #F8F8F8; border-right: 1px solid #B3B3B3; border-top: 1px solid #B3B3B3; -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); pointer-events: none; z-index: 10; }
#Form_ItemEditForm ul.SelectionGroup li.selected label.ui-button:after { top: 43px; }
#Form_ItemEditForm ul.SelectionGroup .treedropdownfield-panel { margin: 1px 0 0 -1px; box-sizing: content-box; }
#Form_ItemEditForm ul.SelectionGroup .treedropdownfield-panel ul li { display: block; clear: both; width: 100%; margin: 0; }
#Form_ItemEditForm ul.SelectionGroup .treedropdownfield-panel ul li li { padding-left: 20px; }

393
dist/css/cmsbundle.css vendored Normal file
View File

@ -0,0 +1,393 @@
form.small .field input.text,
form.small .field textarea,
form.small .field select,
form.small .field .TreeDropdownField,
.field.small input.text,
.field.small textarea,
.field.small select,
.field.small .TreeDropdownField {
width: 100%; }
#FileP .fieldgroup-field {
width: 100%; }
#FileP .fieldgroup-field .cms-file-info-preview {
box-shadow: none; }
#FileP .fieldgroup-field .cms-file-info-data {
width: 400px; }
#FileP .fieldgroup-field .fieldholder-small {
margin-top: 5px; }
#FileP .fieldgroup-field .fieldholder-small label {
width: auto;
margin-left: 0;
padding-top: 0;
margin-right: 10px;
font-weight: bold;
float: left; }
#FileP .fieldgroup-field .fieldholder-small .readonly {
font-style: italic;
color: #666; }
#Actions {
box-shadow: none;
border: none;
padding: 0; }
#Actions li {
margin-left: 2px; }
#Actions li:first-child {
margin-left: 0; }
#Actions li.delete-button-appended {
display: inline-block;
position: relative;
margin-left: 0; }
.DMSDocumentActionsPanel .fieldgroup {
display: none;
float: none;
width: auto;
background: #f8f8f8;
padding: 15px;
border: 1px solid #d0d3d5; }
.DMSDocumentActionsPanel .fieldgroup .fieldholder-small label {
float: none;
width: auto;
margin: 0;
padding: 0; }
.DMSDocumentActionsPanel .fieldgroup .fieldholder-small label.ss-ui-button {
float: left;
margin: 0 10px 0 0; }
.DMSDocumentActionsPanel .fieldgroup .embargo li,
.DMSDocumentActionsPanel .fieldgroup .expiry li {
float: none;
width: 100%;
margin-left: 8px; }
.DMSDocumentActionsPanel .fieldgroup .embargo li label,
.DMSDocumentActionsPanel .fieldgroup .expiry li label {
padding-left: 10px; }
.DMSDocumentActionsPanel .fieldgroup .embargo .embargoDatetime,
.DMSDocumentActionsPanel .fieldgroup .embargo .expiryDatetime,
.DMSDocumentActionsPanel .fieldgroup .expiry .embargoDatetime,
.DMSDocumentActionsPanel .fieldgroup .expiry .expiryDatetime {
margin-top: 0;
margin-left: 34px;
overflow: hidden; }
.DMSDocumentActionsPanel .fieldgroup .embargo .embargoDatetime .field.date, .DMSDocumentActionsPanel .fieldgroup .embargo .embargoDatetime .field.time,
.DMSDocumentActionsPanel .fieldgroup .embargo .expiryDatetime .field.date,
.DMSDocumentActionsPanel .fieldgroup .embargo .expiryDatetime .field.time,
.DMSDocumentActionsPanel .fieldgroup .expiry .embargoDatetime .field.date,
.DMSDocumentActionsPanel .fieldgroup .expiry .embargoDatetime .field.time,
.DMSDocumentActionsPanel .fieldgroup .expiry .expiryDatetime .field.date,
.DMSDocumentActionsPanel .fieldgroup .expiry .expiryDatetime .field.time {
display: inline-block;
width: auto;
margin: 0;
padding: 0; }
.DMSDocumentActionsPanel .fieldgroup .embargo .embargoDatetime .field.date .middleColumn,
.DMSDocumentActionsPanel .fieldgroup .embargo .expiryDatetime .field.date .middleColumn,
.DMSDocumentActionsPanel .fieldgroup .expiry .embargoDatetime .field.date .middleColumn,
.DMSDocumentActionsPanel .fieldgroup .expiry .expiryDatetime .field.date .middleColumn {
background: url(../../images/calendar-month.png) 90px 7px no-repeat;
overflow: hidden; }
.DMSDocumentActionsPanel .fieldgroup .embargo .embargoDatetime .field.time .middleColumn,
.DMSDocumentActionsPanel .fieldgroup .embargo .expiryDatetime .field.time .middleColumn,
.DMSDocumentActionsPanel .fieldgroup .expiry .embargoDatetime .field.time .middleColumn,
.DMSDocumentActionsPanel .fieldgroup .expiry .expiryDatetime .field.time .middleColumn {
background: url(../../images/clock-frame.png) 90px 7px no-repeat;
overflow: hidden; }
.DMSDocumentActionsPanel .fieldgroup .embargo .embargoDatetime .middleColumn,
.DMSDocumentActionsPanel .fieldgroup .embargo .expiryDatetime .middleColumn,
.DMSDocumentActionsPanel .fieldgroup .expiry .embargoDatetime .middleColumn,
.DMSDocumentActionsPanel .fieldgroup .expiry .expiryDatetime .middleColumn {
margin-left: 0;
width: auto;
border: none; }
.DMSDocumentActionsPanel .fieldgroup .embargo .embargoDatetime .middleColumn input,
.DMSDocumentActionsPanel .fieldgroup .embargo .expiryDatetime .middleColumn input,
.DMSDocumentActionsPanel .fieldgroup .expiry .embargoDatetime .middleColumn input,
.DMSDocumentActionsPanel .fieldgroup .expiry .expiryDatetime .middleColumn input {
width: 80px;
margin-right: 40px; }
.DMSDocumentActionsPanel #Embargo {
border: none;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none; }
.DMSDocumentActionsPanel .ss-uploadfield-files .ss-uploadfield-item-preview {
background: url(../../images/app_icons/generic_32.png) -10px -6px no-repeat; }
.DMSDocumentActionsPanel .ss-uploadfield-files .ss-uploadfield-item-name span.name {
width: 260px; }
.DMSDocumentActionsPanel .ss-uploadfield-files .ss-uploadfield-item-actions .ss-uploadfield-item-cancel {
width: auto;
text-indent: 0; }
.DMSDocumentActionsPanel .ss-uploadfield-files .ss-uploadfield-item-actions .ss-uploadfield-item-cancel .btn-icon-deleteLight {
background-position: 0 -128px;
display: inline-block; }
.DMSDocumentActionsPanel .ss-uploadfield-files .ss-uploadfield-item-actions .ss-uploadfield-item-cancel .ui-button-text {
display: block;
position: relative;
float: right;
color: #555;
padding: 0;
padding-left: 2em; }
.DMSDocumentActionsPanel > .fieldgroup.middleColumn {
overflow: hidden;
display: block; }
.DMSDocumentActionsPanel > .fieldgroup.middleColumn .fieldgroup-field {
width: 100%; }
#Form_ItemEditForm fieldset table.ss-gridfield-table {
width: 494px; }
#Form_ItemEditForm fieldset table.ss-gridfield-table tr th.main {
min-width: 175px; }
#Form_ItemEditForm fieldset table.ss-gridfield-table tr th.main.col-action_SetOrderID {
width: 60px;
min-width: 60px; }
#Form_ItemEditForm fieldset table.ss-gridfield-table tr td {
white-space: normal; }
#ui-datepicker-div {
border: 1px solid #DDD; }
.ui-autocomplete {
border: 1px solid #DDD;
box-shadow: 0 1px 2px 0px #AFAFAF;
max-height: 300px;
overflow: scroll; }
.cms fieldset.documents table td,
.cms fieldset.relatedLinks table td {
white-space: normal; }
.cms fieldset.documents table td.col-buttons,
.cms fieldset.relatedLinks table td.col-buttons {
white-space: nowrap; }
.cms fieldset.documents table td.col-buttons .dms-delete-link-only .ui-icon,
.cms fieldset.relatedLinks table td.col-buttons .dms-delete-link-only .ui-icon {
background: url(../../images/chain-unchain.png) no-repeat; }
.cms fieldset.documents table tr.dms-document-hidden-row.odd,
.cms fieldset.relatedLinks table tr.dms-document-hidden-row.odd {
background-color: rgba(242, 220, 222, 0.6); }
.cms fieldset.documents table tr.dms-document-hidden-row.even,
.cms fieldset.relatedLinks table tr.dms-document-hidden-row.even {
background-color: rgba(243, 202, 204, 0.675); }
.cms fieldset.documents table tr.dms-document-hidden-row:hover,
.cms fieldset.relatedLinks table tr.dms-document-hidden-row:hover {
background-color: rgba(245, 172, 173, 0.8) !important; }
.DMSDocumentAddController .ui-tabs ul.ui-tabs-nav {
border-bottom: none;
float: right;
margin: 8px 0 -1px 0;
padding: 0 24px 0 0; }
.DMSDocumentAddController .ui-tabs ul.ui-tabs-nav li {
padding-bottom: 1px;
border: 1px solid #C0C0C2; }
.DMSDocumentAddController .ui-tabs ul.ui-tabs-nav li a {
padding: 8px 20px 8px; }
.ss-add .document-add-existing input.document-autocomplete {
position: absolute;
z-index: 9999;
width: 390px;
padding: 9px 7px;
border-bottom-right-radius: 0;
border-top-right-radius: 0;
outline: none;
box-sizing: border-box;
-moz-box-sizing: border-box; }
.ss-add .document-add-existing input.document-autocomplete[disabled] {
color: #C0C0C2;
text-shadow: 0 -1px 0 #FFF;
background: #EEE;
background-image: none;
box-shadow: inset 0 1px 8px 0 #C4C4C4;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0; }
.ss-add .document-add-existing .TreeDropdownField {
border: none;
width: 100%;
max-width: 512px;
box-sizing: border-box;
cursor: pointer; }
.ss-add .document-add-existing .treedropdownfield-toggle-panel-link {
padding: 5px 9px 9px;
background: #fff;
border: 1px solid #B3B3B3;
float: right;
z-index: 99999;
position: relative; }
.ss-add .document-add-existing .treedropdownfield-toggle-panel-link.treedropdownfield-open-tree {
background: #fff;
border: 1px solid #B3B3B3;
border-bottom: none;
border-bottom-right-radius: 0; }
.ss-add .document-add-existing .treedropdownfield-title {
width: auto; }
.ss-add .document-add-existing .treedropdownfield-toggle-panel-link a {
display: inline-block;
top: 4px;
position: relative; }
.ss-add .document-add-existing .document-list {
width: 510px;
border: 1px solid #DDD;
border-top: none;
background: #ffffff;
display: none;
box-shadow: 0 2px 4px 1px #DDD;
max-height: 300px;
border-radius: 6px;
background-clip: padding-box;
overflow: scroll; }
.ss-add .document-add-existing .document-list p {
padding: 10px 10px 0; }
.ss-add .document-add-existing .document-list ul {
padding: 4px 0; }
.ss-add .document-add-existing .document-list ul li {
line-height: 18px; }
.ss-add .document-add-existing .document-list ul li a {
display: block;
padding: 4px 8px;
border: 1px solid #FFF;
color: black; }
.ss-add .document-add-existing .document-list ul li a:hover {
border: 1px solid #CCC;
border-radius: 4px;
background: rgba(203, 203, 203, 0.4);
cursor: pointer;
text-decoration: none;
outline: none;
text-shadow: none; }
.ss-add .document-add-existing.link-editor-context label {
float: left;
display: block;
width: 176px;
padding: 8px 8px 8px 0;
line-height: 16px;
font-weight: bold;
text-shadow: 1px 1px 0 white; }
.ss-add .document-add-existing.link-editor-context .middleColumn {
margin-left: 184px; }
.ss-add .document-add-existing.link-editor-context .middleColumn input {
background: white;
border: 1px solid #B3B3B3;
line-height: 16px;
margin: 0;
border-radius: 4px;
background-size: 100%;
max-width: 512px; }
.ss-add .ss-assetuploadfield.link-editor-context label {
float: left;
display: block;
width: 176px;
padding: 8px 8px 8px 0;
line-height: 16px;
font-weight: bold;
text-shadow: 1px 1px 0 white; }
.ss-add .ss-assetuploadfield.link-editor-context .middleColumn {
margin-left: 184px;
display: block;
padding: 8px 8px 8px 0;
font-style: italic;
min-height: 20px; }
.ss-add .ss-assetuploadfield .step4 {
margin-bottom: 10px; }
.cms .ss-add .treedropdownfield-panel,
.cms .selectiongroup .treedropdownfield-panel {
margin: -1px 0 0 0;
box-sizing: border-box; }
.cms .ss-add .treedropdownfield-panel ul,
.cms .selectiongroup .treedropdownfield-panel ul {
padding: 4px 0; }
.cms .ss-add .treedropdownfield-panel ul li,
.cms .selectiongroup .treedropdownfield-panel ul li {
border: 1px solid #ffffff; }
.cms .ss-add .treedropdownfield-panel ul li a,
.cms .selectiongroup .treedropdownfield-panel ul li a {
display: block;
padding: 4px 2px; }
.cms .ss-add .treedropdownfield-panel ul li a.jstree-hovered,
.cms .selectiongroup .treedropdownfield-panel ul li a.jstree-hovered {
background: rgba(203, 203, 203, 0.4);
border: 1px solid #CCC; }
@-moz-document url-prefix() .ss-add .document-add-existing input {
padding: 10px 7px; }
#Form_EditForm_Documents {
padding: 1em 0; }
#Form_EditForm_Documents input[name="filter[LastChanged]"] {
display: none; }
#Form_EditForm_RelatedLinks table {
padding: 1em 0; }
#Form_EditForm_RelatedLinks table thead h2 {
display: none; }
#Form_ItemEditForm h3:first-child {
display: inline-block;
float: left;
width: 184px; }
#Form_ItemEditForm ul.SelectionGroup {
display: inline-block;
position: relative;
padding: 0;
margin-top: 9px;
margin-left: 0;
height: 110px;
background: none;
border: none; }
#Form_ItemEditForm ul.SelectionGroup li {
width: auto;
clear: none;
display: inline;
margin-right: 4px; }
#Form_ItemEditForm ul.SelectionGroup li input.selector {
display: none; }
#Form_ItemEditForm ul.SelectionGroup li label.ui-button {
font-weight: bold;
border: 1px solid #C0C0C2;
border-radius: 3px;
padding: 0.8em 1.5em; }
#Form_ItemEditForm ul.SelectionGroup li label.ui-button:hover {
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); }
#Form_ItemEditForm ul.SelectionGroup li div.field {
margin-left: 0px;
margin-bottom: 1em;
width: 600px;
position: absolute;
left: 0;
margin-top: 13px;
padding: 10px;
background: white;
border: 1px solid #B3B3B3; }
#Form_ItemEditForm ul.SelectionGroup li.selected label.ui-button:after {
top: 43px; }
#Form_ItemEditForm ul.SelectionGroup .treedropdownfield-panel {
margin: 1px 0 0 -1px;
box-sizing: content-box; }
#Form_ItemEditForm ul.SelectionGroup .treedropdownfield-panel ul li {
display: block;
clear: both;
width: 100%;
margin: 0; }
#Form_ItemEditForm ul.SelectionGroup .treedropdownfield-panel ul li li {
padding-left: 20px; }

View File

@ -0,0 +1,28 @@
# Building frontend assets
This guide is intended for instructions on dealing with frontend asset files while contributing to this module. You
could also extend the Javascript and/or SCSS files using a combination of your own Webpack configurations and
`Requirements::block` calls (to block the default DMS assets), but this is not the primary intent of this document.
## Javascript
Javascript files use jQuery entwine, and live in the `javascript` folder. You can edit these files directly.
## SASS/CSS
CSS is build using Webpack and the sass-loader plugin. To install the required dependencies, you will need NodeJS and
npm installed on your local machine. You can then install by running `npm install` from the `dms` module folder.
To make changes to CSS you need to first make the change in the relevant SCSS file in the `scss` folder.
You can then compile the SCSS into CSS files:
```
npm run build
# or, to watch:
npm run watch
```
This will compile the SCSS files and produce a single compiled file under `dist/css/cmsbundle.css`. This file is named
this way to distinguish the fact that its contents are all related to the CMS rather than the frontend of a SilverStripe
website.

View File

@ -28,3 +28,8 @@ having a Document Set intermediary (@todo Add a build task for this).
The default template entry point is now `DocumentSets.ss` (previously `Documents.ss`). As well as this change, The default template entry point is now `DocumentSets.ss` (previously `Documents.ss`). As well as this change,
`Documents.ss` has been renamed to `DocumentSet.ss`. `Documents.ss` has been renamed to `DocumentSet.ss`.
## Frontend assets
We've removed the configuration for using Compass to build SCSS. You can now use Webpack instead.
[See here](building-frontend-assets.md) for more information on this.

View File

@ -10,6 +10,7 @@
* [Manage page relations](manage-page-relations.md) * [Manage page relations](manage-page-relations.md)
* [Manage tags](manage-tags.md) * [Manage tags](manage-tags.md)
* [Manage related documents](manage-related-documents.md) * [Manage related documents](manage-related-documents.md)
* [Building frontend assets](building-frontend-assets.md)
## CMS user help ## CMS user help

36
package.json Normal file
View File

@ -0,0 +1,36 @@
{
"name": "silverstripe-dms",
"version": "2.0.0",
"description": "SilverStripe Document Management System",
"directories": {
"doc": "docs",
"test": "tests"
},
"devDependencies": {
"css-loader": "^0.28.1",
"extract-text-webpack-plugin": "^2.1.0",
"file-loader": "^0.11.1",
"node-sass": "^4.5.2",
"sass-loader": "^6.0.3",
"style-loader": "^0.17.0",
"webpack": "^2.5.1"
},
"scripts": {
"build": "webpack --bail --progress",
"watch": "webpack --watch --progress"
},
"repository": {
"type": "git",
"url": "git://github.com/silverstripe/silverstripe-dms.git"
},
"keywords": [
"silverstripe",
"dms"
],
"author": "SilverStripe Ltd",
"license": "BSD-3-Clause",
"bugs": {
"url": "https://github.com/silverstripe/silverstripe-dms/issues"
},
"homepage": "https://github.com/silverstripe/silverstripe-dms#readme"
}

View File

@ -1,31 +1,29 @@
@import "compass/css3";
@import '_mixins';
$color-button-generic: #e6e6e6 !default;
form.small .field input.text, form.small .field input.text,
form.small .field textarea, form.small .field textarea,
form.small .field select, form.small .field select,
form.small .field .TreeDropdownField, form.small .field .TreeDropdownField,
.field.small input.text, .field.small textarea, .field.small input.text,
.field.small select, .field.small .TreeDropdownField{ .field.small textarea,
.field.small select,
.field.small .TreeDropdownField {
width: 100%; width: 100%;
} }
#FileP{ #FileP {
.fieldgroup-field{ .fieldgroup-field {
width:100%; width: 100%;
.cms-file-info-preview{
box-shadow:none; .cms-file-info-preview {
box-shadow: none;
} }
.cms-file-info-data{
width:400px; .cms-file-info-data {
width: 400px;
} }
.fieldholder-small{ .fieldholder-small {
margin-top: 5px; margin-top: 5px;
label{ label {
width:auto; width: auto;
margin-left: 0; margin-left: 0;
padding-top: 0; padding-top: 0;
margin-right: 10px; margin-right: 10px;
@ -33,112 +31,104 @@ form.small .field .TreeDropdownField,
float: left; float: left;
} }
.readonly{ .readonly{
font-style:italic; font-style: italic;
color: #666; color: #666;
} }
} }
} }
} }
#DocumentTypeID{ #Actions {
@include tabButtons;
}
#Actions{
box-shadow:none; box-shadow:none;
border:none; border:none;
padding:0; padding:0;
li{ li {
margin-left: 2px; margin-left: 2px;
&:first-child{ &:first-child {
margin-left: 0; margin-left: 0;
} }
&.delete-button-appended{ &.delete-button-appended {
display: inline-block; display: inline-block;
position: relative; position: relative;
margin-left: 0; margin-left: 0;
} }
&.dms-active{ // &.dms-active{
@include active-actions-btn; // @include active-actions-btn;
} // }
} }
} }
.DMSDocumentActionsPanel{ .DMSDocumentActionsPanel {
/*.middleColumn{
margin-left:184px;
width: 510px;
form.small &{
margin-left: 120px;
}
}
*/
/*label.fieldholder-small-label{
display: none;
}*/
.fieldgroup { .fieldgroup {
display: none; display: none;
float:none; float: none;
width:auto; width: auto;
background: #f8f8f8; background: #f8f8f8;
padding: 15px; padding: 15px;
border: 1px solid #d0d3d5; border: 1px solid #d0d3d5;
@include border-radius(5px);
.fieldholder-small{ .fieldholder-small {
label{ label {
float:none; float: none;
width:auto; width: auto;
margin:0; margin: 0;
padding:0; padding: 0;
&.ss-ui-button{
&.ss-ui-button {
float: left; float: left;
margin: 0 10px 0 0; margin: 0 10px 0 0;
} }
} }
} }
.embargo, .expiry{
li{ .embargo,
.expiry {
li {
float: none; float: none;
width: 100%; width: 100%;
margin-left: 8px; margin-left: 8px;
label{
label {
padding-left: 10px; padding-left: 10px;
} }
} }
.embargoDatetime, .expiryDatetime{
.embargoDatetime,
.expiryDatetime {
margin-top: 0; margin-top: 0;
margin-left: 34px; margin-left: 34px;
overflow: hidden; overflow: hidden;
.field{
&.date, &.time{ .field {
&.date,
&.time {
display: inline-block; display: inline-block;
width: auto; width: auto;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
&.date{
&.date {
.middleColumn{ .middleColumn{
background: url('../images/calendar-month.png') 90px 7px no-repeat; background: url('../images/calendar-month.png') 90px 7px no-repeat;
overflow: hidden; overflow: hidden;
} }
} }
&.time{
.middleColumn{ &.time {
.middleColumn {
background: url('../images/clock-frame.png') 90px 7px no-repeat; background: url('../images/clock-frame.png') 90px 7px no-repeat;
overflow: hidden; overflow: hidden;
} }
} }
} }
.middleColumn{
.middleColumn {
margin-left: 0; margin-left: 0;
width: auto; width: auto;
border: none; border: none;
input{
input {
width: 80px; width: 80px;
margin-right: 40px; margin-right: 40px;
} }
@ -154,24 +144,28 @@ form.small .field .TreeDropdownField,
-webkit-box-shadow: none; -webkit-box-shadow: none;
} }
.ss-uploadfield-files{ .ss-uploadfield-files {
.ss-uploadfield-item-preview{ .ss-uploadfield-item-preview {
background: url('../images/app_icons/generic_32.png') -10px -6px no-repeat; background: url('../images/app_icons/generic_32.png') -10px -6px no-repeat;
} }
.ss-uploadfield-item-name{
span.name{ .ss-uploadfield-item-name {
span.name {
width: 260px; width: 260px;
} }
} }
.ss-uploadfield-item-actions{
.ss-uploadfield-item-cancel{ .ss-uploadfield-item-actions {
.ss-uploadfield-item-cancel {
width: auto; width: auto;
text-indent:0; text-indent: 0;
.btn-icon-deleteLight{
.btn-icon-deleteLight {
background-position: 0 -128px; background-position: 0 -128px;
display: inline-block; display: inline-block;
} }
.ui-button-text{
.ui-button-text {
display: block; display: block;
position: relative; position: relative;
float: right; float: right;
@ -186,33 +180,36 @@ form.small .field .TreeDropdownField,
& > .fieldgroup.middleColumn { & > .fieldgroup.middleColumn {
overflow: hidden; overflow: hidden;
display: block; display: block;
.fieldgroup-field { .fieldgroup-field {
width: 100%; width: 100%;
} }
} }
} }
#Form_ItemEditForm{ #Form_ItemEditForm {
fieldset{ fieldset {
table.ss-gridfield-table{ table.ss-gridfield-table {
width: 494px; width: 494px;
//max-width:508px;
tr{ tr {
th.main{ th.main {
min-width:175px; min-width: 175px;
&.col-action_SetOrderID{
width:60px; &.col-action_SetOrderID {
min-width:60px; width: 60px;
min-width: 60px;
} }
} }
td{
white-space:normal; td {
white-space: normal;
} }
} }
} }
} }
} }
#ui-datepicker-div{ #ui-datepicker-div {
border: 1px solid #DDD; border: 1px solid #DDD;
} }

View File

@ -1,8 +1,3 @@
@import '_mixins';
//data-icon="cross-circle"
$gf_colour_zebra: #F0F4F7;
.ui-autocomplete{ .ui-autocomplete{
border: 1px solid #DDD; border: 1px solid #DDD;
box-shadow: 0 1px 2px 0px #AFAFAF; box-shadow: 0 1px 2px 0px #AFAFAF;
@ -10,44 +5,51 @@ $gf_colour_zebra: #F0F4F7;
overflow: scroll; overflow: scroll;
} }
.cms fieldset.documents, .cms fieldset.relatedLinks{ .cms fieldset.documents,
table{ .cms fieldset.relatedLinks {
td{ table {
white-space:normal; td {
white-space: normal;
} }
td.col-buttons{
white-space:nowrap; td.col-buttons {
.dms-delete-link-only{ white-space: nowrap;
.ui-icon{
.dms-delete-link-only {
.ui-icon {
background: url(../images/chain-unchain.png) no-repeat; background: url(../images/chain-unchain.png) no-repeat;
} }
} }
} }
tr.dms-document-hidden-row { tr.dms-document-hidden-row {
&.odd { &.odd {
background-color: mix($gf_colour_zebra, rgba(255, 4, 0, 0.2)); background-color: mix($color-zebra, rgba(255, 4, 0, 0.2));
} }
&.even { &.even {
background-color: mix($gf_colour_zebra, rgba(255, 4, 0, 0.35)); background-color: mix($color-zebra, rgba(255, 4, 0, 0.35));
} }
&:hover { &:hover {
background-color: mix($gf_colour_zebra, rgba(255, 4, 0, 0.6)) !important; background-color: mix($color-zebra, rgba(255, 4, 0, 0.6)) !important;
} }
} }
} }
} }
.DMSDocumentAddController .ui-tabs {
.DMSDocumentAddController .ui-tabs{ ul.ui-tabs-nav {
ul.ui-tabs-nav{ border-bottom: none;
border-bottom:none;
float: right; float: right;
margin: 8px 0 -1px 0; margin: 8px 0 -1px 0;
padding: 0 24px 0 0; padding: 0 24px 0 0;
li{
li {
padding-bottom: 1px; padding-bottom: 1px;
border: 1px solid #C0C0C2; border: 1px solid #C0C0C2;
a{
a {
padding: 8px 20px 8px; padding: 8px 20px 8px;
} }
} }
@ -59,13 +61,12 @@ $gf_colour_zebra: #F0F4F7;
input.document-autocomplete { input.document-autocomplete {
position: absolute; position: absolute;
z-index: 9999; z-index: 9999;
//top: 70px;
width: 390px; width: 390px;
padding: 9px 7px; padding: 9px 7px;
border-bottom-right-radius:0; border-bottom-right-radius: 0;
border-top-right-radius:0; border-top-right-radius: 0;
outline:none; outline: none;
box-sizing:border-box; box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
&[disabled] { &[disabled] {
@ -74,12 +75,13 @@ $gf_colour_zebra: #F0F4F7;
background: #EEE; background: #EEE;
background-image:none; background-image:none;
box-shadow: inset 0 1px 8px 0 #C4C4C4; box-shadow: inset 0 1px 8px 0 #C4C4C4;
border-bottom-left-radius:0; border-bottom-left-radius: 0;
border-bottom-right-radius:0; border-bottom-right-radius: 0;
} }
} }
.TreeDropdownField { .TreeDropdownField {
border:none; border: none;
width: 100%; width: 100%;
max-width: 512px; max-width: 512px;
box-sizing: border-box; box-sizing: border-box;
@ -101,6 +103,7 @@ $gf_colour_zebra: #F0F4F7;
border-bottom-right-radius:0; border-bottom-right-radius:0;
} }
} }
.treedropdownfield-title { .treedropdownfield-title {
width: auto; width: auto;
} }
@ -114,14 +117,14 @@ $gf_colour_zebra: #F0F4F7;
.document-list { .document-list {
width: 510px; width: 510px;
border: 1px solid #DDD; border: 1px solid #DDD;
border-top:none; border-top: none;
background: #ffffff; background: #ffffff;
display: none; display: none;
box-shadow:0 2px 4px 1px #DDD; box-shadow: 0 2px 4px 1px #DDD;
max-height:300px; max-height: 300px;
border-radius: 6px; border-radius: 6px;
background-clip: padding-box; background-clip: padding-box;
overflow:scroll; overflow: scroll;
p { p {
padding: 10px 10px 0; padding: 10px 10px 0;
@ -131,7 +134,7 @@ $gf_colour_zebra: #F0F4F7;
padding: 4px 0; padding: 4px 0;
li { li {
line-height:18px; line-height: 18px;
a { a {
display: block; display: block;
@ -144,28 +147,31 @@ $gf_colour_zebra: #F0F4F7;
border-radius: 4px; border-radius: 4px;
background: rgba(203, 203, 203, 0.4); background: rgba(203, 203, 203, 0.4);
cursor: pointer; cursor: pointer;
text-decoration:none; text-decoration: none;
outline:none; outline: none;
text-shadow:none; text-shadow: none;
} }
} }
} }
} }
} }
&.link-editor-context{
label{ &.link-editor-context {
label {
float: left; float: left;
display: block; display: block;
width: 176px; width: 176px;
padding:8px 8px 8px 0; padding: 8px 8px 8px 0;
line-height: 16px; line-height: 16px;
font-weight: bold; font-weight: bold;
text-shadow: 1px 1px 0 white; text-shadow: 1px 1px 0 white;
} }
.middleColumn{
.middleColumn {
margin-left: 184px; margin-left: 184px;
input{
background:white; input {
background: white;
border: 1px solid #B3B3B3; border: 1px solid #B3B3B3;
line-height: 16px; line-height: 16px;
margin: 0; margin: 0;
@ -176,42 +182,48 @@ $gf_colour_zebra: #F0F4F7;
} }
} }
} }
.ss-assetuploadfield{
&.link-editor-context{ .ss-assetuploadfield {
label{ &.link-editor-context {
label {
float: left; float: left;
display: block; display: block;
width: 176px; width: 176px;
padding:8px 8px 8px 0; padding: 8px 8px 8px 0;
line-height: 16px; line-height: 16px;
font-weight: bold; font-weight: bold;
text-shadow: 1px 1px 0 white; text-shadow: 1px 1px 0 white;
} }
.middleColumn{
.middleColumn {
margin-left: 184px; margin-left: 184px;
display: block; display: block;
padding: 8px 8px 8px 0; padding: 8px 8px 8px 0;
font-style: italic; font-style: italic;
min-height:20px; min-height: 20px;
} }
} }
.step4{
.step4 {
margin-bottom: 10px; margin-bottom: 10px;
} }
} }
} }
//Styling for tree dropdown field // Styling for tree dropdown field
.cms{ .cms {
.ss-add, .selectiongroup{ .ss-add,
.selectiongroup {
.treedropdownfield-panel { .treedropdownfield-panel {
margin: -1px 0 0 0; margin: -1px 0 0 0;
box-sizing: border-box; box-sizing: border-box;
ul { ul {
padding: 4px 0; padding: 4px 0;
li { li {
border: 1px solid #ffffff; border: 1px solid #ffffff;
a { a {
display: block; display: block;
padding: 4px 2px; padding: 4px 2px;
@ -230,45 +242,37 @@ $gf_colour_zebra: #F0F4F7;
// Hack for Firefox to fix padding on adding document input. // Hack for Firefox to fix padding on adding document input.
// FF renders the size different and pushes it out by 2px compared to webkit // FF renders the size different and pushes it out by 2px compared to webkit
@-moz-document url-prefix() { @-moz-document url-prefix() .ss-add .document-add-existing input {
.ss-add{
.document-add-existing{
input{
padding: 10px 7px; padding: 10px 7px;
}
}
}
} }
#Form_EditForm_Documents{ #Form_EditForm_Documents {
padding: 1em 0; padding: 1em 0;
input[name="filter[LastChanged]"] { input[name="filter[LastChanged]"] {
display: none; display: none;
} }
} }
#Form_EditForm_RelatedLinks{ #Form_EditForm_RelatedLinks {
table{ table {
padding: 1em 0; padding: 1em 0;
thead{ thead {
h2{ h2 {
display: none; display: none;
} }
} }
} }
} }
#SectionID, #DocumentTypeID{ #Form_ItemEditForm {
@include tabButtons; h3:first-child {
}
#Form_ItemEditForm{
h3:first-child{
display: inline-block; display: inline-block;
float: left; float: left;
width: 184px; width: 184px;
} }
ul.SelectionGroup{
ul.SelectionGroup {
display: inline-block; display: inline-block;
position: relative; position: relative;
padding: 0; padding: 0;
@ -277,63 +281,59 @@ $gf_colour_zebra: #F0F4F7;
height: 110px; height: 110px;
background: none; background: none;
border: none; border: none;
li{
li {
width: auto; width: auto;
clear: none; clear: none;
display: inline; display: inline;
margin-right: 4px; margin-right: 4px;
input{
&.selector{ input {
display:none; &.selector {
display: none;
} }
} }
label{
&.ui-button{ label {
@include background( &.ui-button {
linear-gradient(color-stops(
lighten($color-button-generic, 10%),
darken($color-button-generic, 5%)
))
);
font-weight: bold; font-weight: bold;
border: 1px solid #C0C0C2; border: 1px solid #C0C0C2;
border-radius: 3px; border-radius: 3px;
padding: 0.8em 1.5em; padding: 0.8em 1.5em;
&:hover { &:hover {
box-shadow: 0 0 5px rgba(0,0,0,0.3); box-shadow: 0 0 5px rgba(0,0,0,0.3);
} }
} }
} }
div.field{
div.field {
margin-left: 0px; margin-left: 0px;
margin-bottom: 1em; margin-bottom: 1em;
width: 600px; width: 600px;
position: absolute; position: absolute;
left:0; left: 0;
margin-top: 13px; margin-top: 13px;
padding: 10px; padding: 10px;
background: white; background: white;
border: 1px solid #B3B3B3; border: 1px solid #B3B3B3;
@include border-radius(4px);
@include background-image(linear-gradient(#efefef, #fff 10%, #fff 90%, #efefef));
} }
&.selected{
label.ui-button{
@include active-actions-btn;
&.selected {
label.ui-button {
&:after { &:after {
top: 43px; top: 43px;
} }
} }
} }
} }
.treedropdownfield-panel{
.treedropdownfield-panel {
margin: 1px 0 0 -1px; margin: 1px 0 0 -1px;
box-sizing: content-box; box-sizing: content-box;
ul{
li{ ul {
li {
display: block; display: block;
clear: both; clear: both;
width: 100%; width: 100%;

View File

@ -1,85 +0,0 @@
@import "compass/css3";
$color-button-generic: #e6e6e6 !default;
@mixin tabButtons{
.middleColumn{
overflow:auto;
min-width: 800px;
ul{
padding:0;
input[type="radio"]{
display:none;
}
li{
display:table;
padding: 0;
width:125px;
height:40px;
white-space:normal;
margin-right: -1px;
border-radius: 0;
&:first-child{
border-radius: 6px 0 0 6px;
border-left: 1px solid #C0C0C2;
}
&:last-child{
border-radius: 0 6px 6px 0;
}
&.selected, .ie8 &.selected{
border-bottom:1px solid #C0C0C2;
@include background(
linear-gradient(color-stops(
darken($color-button-generic, 15%),
$color-button-generic
))
);
background-color: darken($color-button-generic, 15%);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#C0C0C2', endColorstr='#E6E6E6'); /* IE6 & IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#C0C0C2', endColorstr='#E6E6E6')"; /* IE8 */
box-shadow: 0 1px 1px 0 #A0A0A0 inset;
:after{
box-shadow: 0 1px 1px 0 #DDD;
}
}
label{
display: table-cell;
vertical-align: middle;
text-align: center;
padding: 0 10px;
}
}
}
}
}
@mixin active-actions-btn{
border-bottom:1px solid #C0C0C2;
@include background(
linear-gradient(color-stops(
darken($color-button-generic, 15%),
$color-button-generic
))
);
background-color: darken($color-button-generic, 15%);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#C0C0C2', endColorstr='#E6E6E6'); /* IE6 & IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#C0C0C2', endColorstr='#E6E6E6')"; /* IE8 */
box-shadow: 0 1px 1px 0 #A0A0A0 inset;
&:after{
content: '';
display: block;
position: absolute;
top: 33px;
left: 50%;
margin-left: -6px;
width: 12px;
height: 12px;
background: #F8F8F8;
border-right: 1px solid #B3B3B3;
border-top: 1px solid #B3B3B3;
-moz-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
pointer-events:none;
z-index: 10;
}
}

5
scss/_variables.scss Normal file
View File

@ -0,0 +1,5 @@
//** Default values for colours, sizes etc
// Colours
$color-button-generic: #e6e6e6 !default;
$color-zebra: #F0F4F7 !default;

3
scss/main.scss Normal file
View File

@ -0,0 +1,3 @@
@import "_variables";
@import "DMSDocumentCMSFields";
@import "DMSMainCMS";

41
webpack.config.js Normal file
View File

@ -0,0 +1,41 @@
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const path = require('path');
const extractSass = new ExtractTextPlugin({
filename: '[name].css',
allChunks: true
});
module.exports = [
{
name: 'css',
entry: {
cmsbundle: './scss/main.scss',
},
output: {
path: path.resolve(__dirname, 'dist/css'),
filename: '[name].css',
},
module: {
rules: [{
test: /\.scss$/,
use: extractSass.extract({
use: [{
loader: 'css-loader?discardComments'
}, {
loader: 'sass-loader'
}],
fallback: 'style-loader'
})
}, {
test: /\.(jpg|gif|png|svg)$/,
use: [{
loader: 'file-loader?emitFile=false&name=../../[path][name].[ext]'
}]
}]
},
plugins: [
extractSass
]
}
];