From b976dc8f78c2d085a4ea437a34a9da2f7e67be67 Mon Sep 17 00:00:00 2001 From: scott1702 Date: Mon, 29 Jun 2015 14:59:48 +1200 Subject: [PATCH] Update button styles --- css/screen.css | 18 ++++++------ scss/_CMSMain.scss | 29 +++++++++++-------- .../CMSPagesController_ContentToolActions.ss | 2 +- 3 files changed, 27 insertions(+), 22 deletions(-) diff --git a/css/screen.css b/css/screen.css index 100401b1..eae4e2a3 100644 --- a/css/screen.css +++ b/css/screen.css @@ -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; } diff --git a/scss/_CMSMain.scss b/scss/_CMSMain.scss index e86dfd89..e82336e5 100644 --- a/scss/_CMSMain.scss +++ b/scss/_CMSMain.scss @@ -63,16 +63,16 @@ .cms-content-tools { #cms-content-treeview { .cms-content-toolbar { - border-bottom:none; - box-shadow:none; - margin-bottom:8px; + border-bottom: none; + box-shadow: none; + margin-bottom: 0; } .cms-tree-expand-trigger { display: block; float: left; - margin:0 0 2px 0; - span.ui-button-text{ - padding-right:8px; + margin: 0 0 2px 0; + span.ui-button-text { + padding-right: 8px; } } @@ -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 { diff --git a/templates/Includes/CMSPagesController_ContentToolActions.ss b/templates/Includes/CMSPagesController_ContentToolActions.ss index 159442e1..3bceb736 100644 --- a/templates/Includes/CMSPagesController_ContentToolActions.ss +++ b/templates/Includes/CMSPagesController_ContentToolActions.ss @@ -1,6 +1,6 @@
- <% _t('CMSMain.AddNewButton', 'Add new') %> + <% _t('CMSMain.AddNewButton', 'Add new') %> <% if $View == 'Tree' %>