tonyair/silverstripe-cms
1
0
Fork 0
mirror of https://github.com/silverstripe/silverstripe-cms synced 2024-10-22 08:05:56 +02:00
Code Issues Projects Releases Wiki Activity

Merge pull request #1233 from scott1702/cms-styling

Browse Source 
Update button styles
This commit is contained in:
Ingo Schommer 2015-07-16 21:56:18 +12:00
commit e4bdd0fd72
3 changed files with 27 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
css/screen.css
View File

@ -14,20 +14,20 @@
#cms-content-treeview .cms-tree-expand-trigger, #cms-content-listview .cms-tree-expand-trigger { display: none; }
/** DEPRECATED: .cms-content-tools will be removed in 4.0 Use .cms-content-filters instead. Hide certain elements when shown in "sidebar mode" */
.cms-content-tools #cms-content-treeview .cms-content-toolbar { border-bottom: none; box-shadow: none; margin-bottom: 8px; }
.cms-content-tools #cms-content-treeview .cms-content-toolbar { border-bottom: none; box-shadow: none; margin-bottom: 0; }
.cms-content-tools #cms-content-treeview .cms-tree-expand-trigger { display: block; float: left; margin: 0 0 2px 0; }
.cms-content-tools #cms-content-treeview .cms-tree-expand-trigger span.ui-button-text { padding-right: 8px; }
.cms-content-tools #cms-content-treeview .cms-tree .badge { display: none; }
.cms-content-tools #cms-content-treeview .cms-tree a:hover > .text > .badge, .cms-content-tools #cms-content-treeview .cms-tree .jstree-clicked > .text > .badge { display: inline-block; }
/** -------------------------------------------- The CMS Content Toolbar. Associated behaviour in CMSMain.js -------------------------------------------- */
.cms-content-toolbar button.ss-ui-button { padding: .4em .75em; vertical-align: baseline; }
.cms-content-toolbar button.ss-ui-button:hover { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
.cms-content-toolbar button.ss-ui-button:focus { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
.cms-content-toolbar button.ss-ui-button:before { font-size: 1.1em; }
.cms-content-toolbar button.ss-ui-button.ui-state-focus { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
.cms-content-toolbar button.ss-ui-button.active { -webkit-box-shadow: 0 0 5px #b3b3b3 inset; -moz-box-shadow: 0 0 5px #b3b3b3 inset; box-shadow: 0 0 5px #b3b3b3 inset; }
.cms-content-toolbar button.ss-ui-button .ui-button-text { display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; zoom: 1; *display: inline; vertical-align: baseline; padding: 0; }
.cms-content-toolbar [class*="font-icon-"].ss-ui-button, .cms-content-toolbar [class^="font-icon-"].ss-ui-button { padding: 5px 8px; vertical-align: middle; }
.cms-content-toolbar [class*="font-icon-"].ss-ui-button:hover, .cms-content-toolbar [class^="font-icon-"].ss-ui-button:hover { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; }
.cms-content-toolbar [class*="font-icon-"].ss-ui-button:focus, .cms-content-toolbar [class^="font-icon-"].ss-ui-button:focus { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; }
.cms-content-toolbar [class*="font-icon-"].ss-ui-button:before, .cms-content-toolbar [class^="font-icon-"].ss-ui-button:before { font-size: 1.3em; margin-right: 0.3em; margin-top: 0; vertical-align: middle; }
.cms-content-toolbar [class*="font-icon-"].ss-ui-button.ui-state-focus, .cms-content-toolbar [class^="font-icon-"].ss-ui-button.ui-state-focus { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; }
.cms-content-toolbar [class*="font-icon-"].ss-ui-button.active, .cms-content-toolbar [class*="font-icon-"].ss-ui-button:active, .cms-content-toolbar [class^="font-icon-"].ss-ui-button.active, .cms-content-toolbar [class^="font-icon-"].ss-ui-button:active { -moz-box-shadow: 0 0 3px rgba(191, 194, 196, 0.9) inset; -webkit-box-shadow: 0 0 3px rgba(191, 194, 196, 0.9) inset; box-shadow: 0 0 3px rgba(191, 194, 196, 0.9) inset; }
.cms-content-toolbar [class*="font-icon-"].ss-ui-button .ui-button-text, .cms-content-toolbar [class^="font-icon-"].ss-ui-button .ui-button-text { display: inline-block; vertical-align: middle; *vertical-align: auto; *zoom: 1; *display: inline; vertical-align: baseline; padding: 0; }
/** ------------------------------------------------------------------ URLSegment field ----------------------------------------------------------------- */
.field.urlsegment.loading { background: url(../images/loading.gif) no-repeat 162px 8px; }
@ -43,7 +43,7 @@
.cms .AssetAdmin .cms-content-fields .cms-edit-form.AssetAdmin { width: 100%; overflow-y: auto; }
.cms .AssetAdmin .cms-content-fields .cms-content-tools .cms-panel-content { overflow: hidden; }
.cms .AssetAdmin .cms-content-fields .cms-content-tools .cms-panel-content .cms-search-form { height: 100%; }
.cms .AssetAdmin .cms-content-toolbar .cms-page-add-button { background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f3f3f3), color-stop(100%, #d9d9d9)); background-image: -webkit-linear-gradient(#f3f3f3, #d9d9d9); background-image: -moz-linear-gradient(#f3f3f3, #d9d9d9); background-image: -o-linear-gradient(#f3f3f3, #d9d9d9); background-image: linear-gradient(#f3f3f3, #d9d9d9); border-color: #c0c0c2; }
.cms .AssetAdmin .cms-content-toolbar .cms-page-add-button { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YzZjNmMyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2Q5ZDlkOSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f3f3f3), color-stop(100%, #d9d9d9)); background-image: -moz-linear-gradient(#f3f3f3, #d9d9d9); background-image: -webkit-linear-gradient(#f3f3f3, #d9d9d9); background-image: linear-gradient(#f3f3f3, #d9d9d9); border-color: #c0c0c2; }
.cms .AssetAdmin .cms-content-toolbar .cms-page-add-button span.btn-icon-add { height: 17px; }
.cms .AssetAdmin .cms-content-toolbar .cms-page-add-button span.ui-button-text { color: #393939; text-shadow: white 0 1px 1px; }
.cms .AssetAdmin #Root_TreeView .cms-tree ul .class-Folder a span.text span.jstree-foldericon { background: url(../images/blue-folder-horizontal.png) no-repeat; width: 16px; height: 16px; float: left; display: block; margin-right: 4px; }

19
scss/_CMSMain.scss
View File

@ -65,7 +65,7 @@
.cms-content-toolbar {
border-bottom: none;
box-shadow: none;
margin-bottom:8px;
margin-bottom: 0;
}
.cms-tree-expand-trigger {
display: block;
@ -95,9 +95,10 @@
* Associated behaviour in CMSMain.js
* -------------------------------------------- */
.cms-content-toolbar {
button.ss-ui-button {
padding: .4em .75em;
vertical-align: baseline;
[class*="font-icon-"].ss-ui-button,
[class^="font-icon-"].ss-ui-button {
padding: 5px 8px;
vertical-align: middle;
&:hover {
@include box-shadow(none);
@ -108,15 +109,19 @@
}
&:before {
font-size: 1.1em;
font-size: 1.3em;
margin-right: 0.3em;
margin-top: 0;
vertical-align: middle;
}
&.ui-state-focus {
@include box-shadow(none);
}
&.active {
@include box-shadow(0 0 5px #b3b3b3 inset);
&.active,
&:active {
@include box-shadow(0 0 3px rgba(191, 194, 196, .9) inset);
}
.ui-button-text {

2
templates/Includes/CMSPagesController_ContentToolActions.ss
View File

@ -1,6 +1,6 @@
<div class="cms-content-toolbar">
<div class="cms-actions-buttons-row">
<a class="cms-page-add-button ss-ui-button ss-ui-action-constructive tool-button" data-icon="add" href="$LinkPageAdd" data-url-addpage="{$LinkPageAdd('', 'ParentID=%s')}"><% _t('CMSMain.AddNewButton', 'Add new') %></a>
<a class="ss-ui-button cms-content-addpage-button tool-button font-icon-plus" href="$LinkPageAdd" data-url-addpage="{$LinkPageAdd('', 'ParentID=%s')}"><% _t('CMSMain.AddNewButton', 'Add new') %></a>
<% if $View == 'Tree' %>
<button class="cms-content-batchactions-button tool-button font-icon-check" data-toolid="batch-actions">