++ ++ +++ {{code}} + + +
+ (function () {
+ "use strict";
+
+ function Controller() {
+
+ var vm = this;
+
+ }
+
+ angular.module("umbraco").controller("My.Controller", Controller);
+
+ })();
+
+
+@param {string=} language Language of the code snippet, e.g csharp, html, css.
+**/
+
+
+(function () {
+ 'use strict';
+
+ var umbCodeSnippet = {
+ templateUrl: 'views/components/umb-code-snippet.html',
+ controller: UmbCodeSnippetController,
+ controllerAs: 'vm',
+ transclude: true,
+ bindings: {
+ language: '<'
+ }
+ };
+
+ function UmbCodeSnippetController($timeout) {
+
+ const vm = this;
+
+ vm.page = {};
+
+ vm.$onInit = onInit;
+ vm.copySuccess = copySuccess;
+ vm.copyError = copyError;
+
+ function onInit() {
+ vm.guid = String.CreateGuid();
+
+ if (vm.language)
+ {
+ switch (vm.language.toLowerCase()) {
+ case "csharp":
+ case "c#":
+ vm.language = "C#";
+ break;
+ case "html":
+ vm.language = "HTML";
+ break;
+ case "css":
+ vm.language = "CSS";
+ break;
+ case "javascript":
+ vm.language = "JavaScript";
+ break;
+ }
+ }
+
+ }
+
+ // copy to clip board success
+ function copySuccess() {
+ if (vm.page.copyCodeButtonState !== "success") {
+ $timeout(function () {
+ vm.page.copyCodeButtonState = "success";
+ });
+ $timeout(function () {
+ resetClipboardButtonState();
+ }, 1000);
+ }
+ }
+
+ // copy to clip board error
+ function copyError() {
+ if (vm.page.copyCodeButtonState !== "error") {
+ $timeout(function () {
+ vm.page.copyCodeButtonState = "error";
+ });
+ $timeout(function () {
+ resetClipboardButtonState();
+ }, 1000);
+ }
+ }
+
+ function resetClipboardButtonState() {
+ vm.page.copyCodeButtonState = "init";
+ }
+ }
+
+ angular.module('umbraco.directives').component('umbCodeSnippet', umbCodeSnippet);
+
+})();
diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbmediagrid.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbmediagrid.directive.js
index 1b011d2e19..1c4bf4d583 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbmediagrid.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbmediagrid.directive.js
@@ -312,14 +312,7 @@ Use this directive to generate a thumbnail grid of media items.
scope.onDetailsHover(item, $event, hover);
}
};
-
- scope.clickEdit = function(item, $event) {
- if (scope.onClickEdit) {
- scope.onClickEdit({"item": item})
- $event.stopPropagation();
- }
- };
-
+
var unbindItemsWatcher = scope.$watch('items', function(newValue, oldValue) {
if (angular.isArray(newValue)) {
activate();
@@ -341,8 +334,8 @@ Use this directive to generate a thumbnail grid of media items.
onDetailsHover: "=",
onClick: '=',
onClickName: "=",
- onClickEdit: "&?",
- allowOnClickEdit: "@?",
+ allowOpenFolder: "=",
+ allowOpenFile: "=",
filterBy: "=",
itemMaxWidth: "@",
itemMaxHeight: "@",
diff --git a/src/Umbraco.Web.UI.Client/src/common/services/editor.service.js b/src/Umbraco.Web.UI.Client/src/common/services/editor.service.js
index 8b922d7ec8..1d80d3a3ed 100644
--- a/src/Umbraco.Web.UI.Client/src/common/services/editor.service.js
+++ b/src/Umbraco.Web.UI.Client/src/common/services/editor.service.js
@@ -367,7 +367,7 @@ When building a custom infinite editor view you can use the same components as a
*/
function contentPicker(editor) {
editor.view = "views/common/infiniteeditors/treepicker/treepicker.html";
- editor.size = "small";
+ if (!editor.size) editor.size = "small";
editor.section = "content";
editor.treeAlias = "content";
open(editor);
@@ -390,7 +390,7 @@ When building a custom infinite editor view you can use the same components as a
*/
function contentTypePicker(editor) {
editor.view = "views/common/infiniteeditors/treepicker/treepicker.html";
- editor.size = "small";
+ if (!editor.size) editor.size = "small";
editor.section = "settings";
editor.treeAlias = "documentTypes";
open(editor);
@@ -413,7 +413,7 @@ When building a custom infinite editor view you can use the same components as a
*/
function mediaTypePicker(editor) {
editor.view = "views/common/infiniteeditors/treepicker/treepicker.html";
- editor.size = "small";
+ if (!editor.size) editor.size = "small";
editor.section = "settings";
editor.treeAlias = "mediaTypes";
open(editor);
@@ -436,7 +436,7 @@ When building a custom infinite editor view you can use the same components as a
*/
function memberTypePicker(editor) {
editor.view = "views/common/infiniteeditors/treepicker/treepicker.html";
- editor.size = "small";
+ if (!editor.size) editor.size = "small";
editor.section = "settings";
editor.treeAlias = "memberTypes";
open(editor);
@@ -457,7 +457,7 @@ When building a custom infinite editor view you can use the same components as a
function copy(editor) {
editor.view = "views/common/infiniteeditors/copy/copy.html";
- editor.size = "small";
+ if (!editor.size) editor.size = "small";
open(editor);
}
@@ -477,7 +477,7 @@ When building a custom infinite editor view you can use the same components as a
function move(editor) {
editor.view = "views/common/infiniteeditors/move/move.html";
- editor.size = "small";
+ if (!editor.size) editor.size = "small";
open(editor);
}
@@ -495,7 +495,7 @@ When building a custom infinite editor view you can use the same components as a
function embed(editor) {
editor.view = "views/common/infiniteeditors/embed/embed.html";
- editor.size = "small";
+ if (!editor.size) editor.size = "small";
open(editor);
}
@@ -514,7 +514,7 @@ When building a custom infinite editor view you can use the same components as a
function rollback(editor) {
editor.view = "views/common/infiniteeditors/rollback/rollback.html";
- editor.size = "small";
+ if (!editor.size) editor.size = "small";
open(editor);
}
@@ -534,7 +534,7 @@ When building a custom infinite editor view you can use the same components as a
*/
function linkPicker(editor) {
editor.view = "views/common/infiniteeditors/linkpicker/linkpicker.html";
- editor.size = "small";
+ if (!editor.size) editor.size = "small";
open(editor);
}
@@ -577,7 +577,7 @@ When building a custom infinite editor view you can use the same components as a
*/
function mediaPicker(editor) {
editor.view = "views/common/infiniteeditors/mediapicker/mediapicker.html";
- editor.size = "small";
+ if (!editor.size) editor.size = "small";
editor.updatedMediaNodes = [];
open(editor);
}
@@ -598,7 +598,7 @@ When building a custom infinite editor view you can use the same components as a
*/
function iconPicker(editor) {
editor.view = "views/common/infiniteeditors/iconpicker/iconpicker.html";
- editor.size = "small";
+ if (!editor.size) editor.size = "small";
open(editor);
}
@@ -692,7 +692,7 @@ When building a custom infinite editor view you can use the same components as a
*/
function treePicker(editor) {
editor.view = "views/common/infiniteeditors/treepicker/treepicker.html";
- editor.size = "small";
+ if (!editor.size) editor.size = "small";
open(editor);
}
@@ -710,7 +710,7 @@ When building a custom infinite editor view you can use the same components as a
*/
function nodePermissions(editor) {
editor.view = "views/common/infiniteeditors/nodepermissions/nodepermissions.html";
- editor.size = "small";
+ if (!editor.size) editor.size = "small";
open(editor);
}
@@ -728,7 +728,7 @@ When building a custom infinite editor view you can use the same components as a
*/
function insertCodeSnippet(editor) {
editor.view = "views/common/infiniteeditors/insertcodesnippet/insertcodesnippet.html";
- editor.size = "small";
+ if (!editor.size) editor.size = "small";
open(editor);
}
@@ -746,7 +746,7 @@ When building a custom infinite editor view you can use the same components as a
*/
function userGroupPicker(editor) {
editor.view = "views/common/infiniteeditors/usergrouppicker/usergrouppicker.html";
- editor.size = "small";
+ if (!editor.size) editor.size = "small";
open(editor);
}
@@ -782,7 +782,7 @@ When building a custom infinite editor view you can use the same components as a
*/
function sectionPicker(editor) {
editor.view = "views/common/infiniteeditors/sectionpicker/sectionpicker.html";
- editor.size = "small";
+ if (!editor.size) editor.size = "small";
open(editor);
}
@@ -800,7 +800,7 @@ When building a custom infinite editor view you can use the same components as a
*/
function insertField(editor) {
editor.view = "views/common/infiniteeditors/insertfield/insertfield.html";
- editor.size = "small";
+ if (!editor.size) editor.size = "small";
open(editor);
}
@@ -818,7 +818,7 @@ When building a custom infinite editor view you can use the same components as a
*/
function templateSections(editor) {
editor.view = "views/common/infiniteeditors/templatesections/templatesections.html";
- editor.size = "small";
+ if (!editor.size) editor.size = "small";
open(editor);
}
@@ -836,7 +836,7 @@ When building a custom infinite editor view you can use the same components as a
*/
function userPicker(editor) {
editor.view = "views/common/infiniteeditors/userpicker/userpicker.html";
- editor.size = "small";
+ if (!editor.size) editor.size = "small";
open(editor);
}
@@ -858,7 +858,7 @@ When building a custom infinite editor view you can use the same components as a
*/
function itemPicker(editor) {
editor.view = "views/common/infiniteeditors/itempicker/itempicker.html";
- editor.size = "small";
+ if (!editor.size) editor.size = "small";
open(editor);
}
@@ -876,7 +876,7 @@ When building a custom infinite editor view you can use the same components as a
*/
function macroPicker(editor) {
editor.view = "views/common/infiniteeditors/macropicker/macropicker.html";
- editor.size = "small";
+ if (!editor.size) editor.size = "small";
open(editor);
}
@@ -896,7 +896,7 @@ When building a custom infinite editor view you can use the same components as a
*/
function memberGroupPicker(editor) {
editor.view = "views/common/infiniteeditors/membergrouppicker/membergrouppicker.html";
- editor.size = "small";
+ if (!editor.size) editor.size = "small";
open(editor);
}
@@ -917,7 +917,7 @@ When building a custom infinite editor view you can use the same components as a
*/
function memberPicker(editor) {
editor.view = "views/common/infiniteeditors/treepicker/treepicker.html";
- editor.size = "small";
+ if (!editor.size) editor.size = "small";
editor.section = "member";
editor.treeAlias = "member";
open(editor);
diff --git a/src/Umbraco.Web.UI.Client/src/common/services/notifications.service.js b/src/Umbraco.Web.UI.Client/src/common/services/notifications.service.js
index c123ac6cea..e5701b9de0 100644
--- a/src/Umbraco.Web.UI.Client/src/common/services/notifications.service.js
+++ b/src/Umbraco.Web.UI.Client/src/common/services/notifications.service.js
@@ -148,7 +148,7 @@ angular.module('umbraco.services')
break;
case 1:
//info
- this.success(args.header, args.message);
+ this.info(args.header, args.message);
break;
case 2:
//error
@@ -297,4 +297,4 @@ angular.module('umbraco.services')
};
return service;
-});
\ No newline at end of file
+});
diff --git a/src/Umbraco.Web.UI.Client/src/common/services/tinymce.service.js b/src/Umbraco.Web.UI.Client/src/common/services/tinymce.service.js
index b0941bd5ad..61e3ae90ec 100644
--- a/src/Umbraco.Web.UI.Client/src/common/services/tinymce.service.js
+++ b/src/Umbraco.Web.UI.Client/src/common/services/tinymce.service.js
@@ -488,7 +488,7 @@ function tinyMceService($rootScope, $q, imageHelper, $locale, $http, $timeout, s
* @methodOf umbraco.services.tinyMceService
*
* @description
- * Creates the umbrco insert embedded media tinymce plugin
+ * Creates the umbraco insert embedded media tinymce plugin
*
* @param {Object} editor the TinyMCE editor instance
*/
@@ -575,7 +575,7 @@ function tinyMceService($rootScope, $q, imageHelper, $locale, $http, $timeout, s
* @methodOf umbraco.services.tinyMceService
*
* @description
- * Creates the umbrco insert media tinymce plugin
+ * Creates the umbraco insert media tinymce plugin
*
* @param {Object} editor the TinyMCE editor instance
*/
@@ -705,7 +705,7 @@ function tinyMceService($rootScope, $q, imageHelper, $locale, $http, $timeout, s
* @methodOf umbraco.services.tinyMceService
*
* @description
- * Creates the insert umbrco macro tinymce plugin
+ * Creates the insert umbraco macro tinymce plugin
*
* @param {Object} editor the TinyMCE editor instance
*/
diff --git a/src/Umbraco.Web.UI.Client/src/less/application/umb-outline.less b/src/Umbraco.Web.UI.Client/src/less/application/umb-outline.less
index 1a04dd10c8..939366d5ac 100644
--- a/src/Umbraco.Web.UI.Client/src/less/application/umb-outline.less
+++ b/src/Umbraco.Web.UI.Client/src/less/application/umb-outline.less
@@ -1,3 +1,7 @@
+*:focus {
+ outline-color: @ui-outline;
+}
+
.umb-outline {
&:focus {
outline:none;
@@ -10,7 +14,28 @@
left: 0;
right: 0;
border-radius: 3px;
- box-shadow: 0 0 2px @blueMid, inset 0 0 2px 1px @blueMid;
+ box-shadow: 0 0 2px 0px @ui-outline, inset 0 0 2px 2px @ui-outline;
}
}
+
+ &.umb-outline--surrounding {
+ &:focus {
+ .tabbing-active &::after {
+ top: -6px;
+ bottom: -6px;
+ left: -6px;
+ right: -6px;
+ border-radius: 9px;
+ }
+ }
+ }
+
+ &.umb-outline--thin {
+ &:focus {
+ .tabbing-active &::after {
+ box-shadow: 0 0 2px @ui-outline, inset 0 0 2px 1px @ui-outline;
+ }
+ }
+ }
+
}
diff --git a/src/Umbraco.Web.UI.Client/src/less/belle.less b/src/Umbraco.Web.UI.Client/src/less/belle.less
index f6490fc79b..b5e032f9fb 100644
--- a/src/Umbraco.Web.UI.Client/src/less/belle.less
+++ b/src/Umbraco.Web.UI.Client/src/less/belle.less
@@ -132,6 +132,7 @@
@import "components/umb-content-grid.less";
@import "components/umb-contextmenu.less";
@import "components/umb-layout-selector.less";
+@import "components/umb-mini-search.less";
@import "components/tooltip/umb-tooltip.less";
@import "components/tooltip/umb-tooltip-list.less";
@import "components/overlays/umb-overlay-backdrop.less";
@@ -140,6 +141,7 @@
@import "components/umb-empty-state.less";
@import "components/umb-property-editor.less";
@import "components/umb-property-actions.less";
+@import "components/umb-code-snippet.less";
@import "components/umb-color-swatches.less";
@import "components/check-circle.less";
@import "components/umb-file-icon.less";
diff --git a/src/Umbraco.Web.UI.Client/src/less/buttons.less b/src/Umbraco.Web.UI.Client/src/less/buttons.less
index 85532f4231..2b50b60ae8 100644
--- a/src/Umbraco.Web.UI.Client/src/less/buttons.less
+++ b/src/Umbraco.Web.UI.Client/src/less/buttons.less
@@ -23,8 +23,7 @@
border-radius: 3px;
// Hover/focus state
- &:hover,
- &:focus {
+ &:hover {
background: @btnBackgroundHighlight;
color: @gray-4;
background-position: 0 -15px;
@@ -35,11 +34,6 @@
.transition(background-position .1s linear);
}
- // Focus state for keyboard and accessibility
- &:focus {
- .tab-focus();
- }
-
// Active state
&.active,
&:active {
@@ -54,7 +48,7 @@
&:disabled:hover {
cursor: default;
border-color: @btnBorder;
- .opacity(65);
+ .opacity(80);
.box-shadow(none);
}
@@ -219,7 +213,7 @@ input[type="button"] {
}
// Made for Umbraco, 2019, used for buttons that has to stand back.
.btn-white {
- .buttonBackground(@btnWhiteBackground, @btnWhiteBackgroundHighlight, @btnWhiteType, @btnWhiteTypeHover);
+ .buttonBackground(@btnWhiteBackground, @btnWhiteBackgroundHighlight, @btnWhiteType, @btnWhiteTypeHover, @gray-10, @gray-7);
}
// Inverse appears as dark gray
.btn-inverse {
@@ -230,8 +224,7 @@ input[type="button"] {
.buttonBackground(@btnNeutralBackground, @btnNeutralBackgroundHighlight);
color: @gray-5;
// Hover/focus state
- &:hover,
- &:focus {
+ &:hover {
color: @gray-5;
}
@@ -261,18 +254,18 @@ input[type="button"] {
.btn-outline {
border: 1px solid;
border-color: @gray-7;
- background: @white;
+ background: transparent;
color: @blueExtraDark;
padding: 5px 13px;
- transition: all .2s linear;
+ transition: border-color .12s linear, color .12s linear;
+ font-weight: 600;
}
-.btn-outline:hover,
-.btn-outline:focus,
-.btn-outline:active {
+.btn-outline:hover {
border-color: @ui-light-type-hover;
color: @ui-light-type-hover;
- background: @white;
+ background: transparent;
+ transition: border-color .12s linear, color .12s linear;
}
// Cross-browser Jank
@@ -309,14 +302,12 @@ input[type="submit"].btn {
color: @linkColor;
.border-radius(0);
}
-.btn-link:hover,
-.btn-link:focus {
+.btn-link:hover {
color: @linkColorHover;
text-decoration: underline;
background-color: transparent;
}
-.btn-link[disabled]:hover,
-.btn-link[disabled]:focus {
+.btn-link[disabled]:hover {
color: @gray-4;
text-decoration: none;
}
@@ -324,8 +315,7 @@ input[type="submit"].btn {
// Make a reverse type of a button link
.btn-link-reverse{
text-decoration:underline;
- &:hover,
- &:focus{
+ &:hover {
text-decoration:none;
}
}
@@ -362,7 +352,7 @@ input[type="submit"].btn {
outline: 0;
-webkit-appearance: none;
- &:hover, &:focus {
+ &:hover {
color: @ui-icon-hover;
}
}
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/application/umb-drawer.less b/src/Umbraco.Web.UI.Client/src/less/components/application/umb-drawer.less
index 064ad67438..5c77a15ec7 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/application/umb-drawer.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/application/umb-drawer.less
@@ -86,6 +86,7 @@
}
.umb-help-badge__title {
+ display: block;
font-size: 15px;
font-weight: bold;
color: @black;
@@ -160,6 +161,9 @@
border-radius: 0;
border-bottom: 1px solid @gray-9;
padding: 10px;
+ background: transparent;
+ width:100%;
+ border: 0 none;
}
.umb-help-list-item:last-child {
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/application/umb-language-picker.less b/src/Umbraco.Web.UI.Client/src/less/components/application/umb-language-picker.less
index 7d91783e32..4e3741905f 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/application/umb-language-picker.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/application/umb-language-picker.less
@@ -19,13 +19,13 @@
box-sizing: border-box;
color: @ui-option-type;
width: 100%;
+ outline-offset: -3px;
}
.umb-language-picker__expand {
font-size: 14px;
}
-.umb-language-picker__toggle:focus,
.umb-language-picker__toggle:hover {
background: @ui-option-hover;
color:@ui-option-type-hover;
@@ -54,10 +54,10 @@
font-size: 14px;
width: 100%;
text-align: left;
+ outline-offset: -3px;
}
-.umb-language-picker__dropdown-item:hover,
-.umb-language-picker__dropdown-item:focus {
+.umb-language-picker__dropdown-item:hover {
background: @ui-option-hover;
text-decoration: none;
color:@ui-option-type-hover;
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/application/umb-tour.less b/src/Umbraco.Web.UI.Client/src/less/components/application/umb-tour.less
index 33a723a3f7..42403c65b1 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/application/umb-tour.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/application/umb-tour.less
@@ -112,3 +112,10 @@
.umb-tour-is-visible .umb-backdrop {
z-index: @zindexTourBackdrop;
}
+
+.umb-tour__popover .underline{
+ font-size: 13px;
+ background: transparent;
+ border: none;
+ padding: 0;
+}
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/buttons/umb-button.less b/src/Umbraco.Web.UI.Client/src/less/components/buttons/umb-button.less
index 7fc965a8fa..4127c2201c 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/buttons/umb-button.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/buttons/umb-button.less
@@ -8,21 +8,6 @@
position: relative;
}
-.umb-button__button:focus {
- outline: none;
- .tabbing-active &:after {
- content: '';
- position: absolute;
- z-index: 10000;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- border-radius: 3px;
- box-shadow: 0 0 2px @blueMid, inset 0 0 2px 1px @blueMid;
- }
-}
-
.umb-button__content {
opacity: 1;
transition: opacity 0.25s ease;
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/editor.less b/src/Umbraco.Web.UI.Client/src/less/components/editor.less
index 85fcc249f9..bc84b0d35e 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/editor.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/editor.less
@@ -164,6 +164,7 @@ a.umb-editor-header__close-split-view:hover {
/* variant switcher */
.umb-variant-switcher__toggle {
+ position: relative;
display: flex;
align-items: center;
padding: 0 10px;
@@ -173,6 +174,8 @@ a.umb-editor-header__close-split-view:hover {
text-decoration: none !important;
font-size: 13px;
color: @ui-action-discreet-type;
+ background: transparent;
+ border: none;
max-width: 50%;
white-space: nowrap;
@@ -185,7 +188,7 @@ a.umb-editor-header__close-split-view:hover {
}
}
-a.umb-variant-switcher__toggle {
+button.umb-variant-switcher__toggle {
transition: color 0.2s ease-in-out;
&:hover {
//background-color: @gray-10;
@@ -242,8 +245,7 @@ a.umb-variant-switcher__toggle {
border-left: 4px solid @ui-active;
}
-.umb-variant-switcher__item:hover,
-.umb-variant-switcher__item:focus {
+.umb-variant-switcher__item:hover {
outline: none;
}
@@ -267,7 +269,7 @@ a.umb-variant-switcher__toggle {
align-items: center;
justify-content: center;
margin-left: 5px;
- top: -6px;
+ top: -3px;
width: 14px;
height: 14px;
border-radius: 7px;
@@ -285,8 +287,10 @@ a.umb-variant-switcher__toggle {
flex: 1;
cursor: pointer;
padding-top: 6px !important;
- padding-bottom: 6px !important;
- border-left: 2px solid transparent;
+ padding-bottom: 6px !important;
+ background-color: transparent;
+ border: none;
+ border-left: 2px solid transparent;
}
.umb-variant-switcher__name {
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/editor/subheader/umb-editor-sub-header.less b/src/Umbraco.Web.UI.Client/src/less/components/editor/subheader/umb-editor-sub-header.less
index 1217441f4e..4ebfa94b6f 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/editor/subheader/umb-editor-sub-header.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/editor/subheader/umb-editor-sub-header.less
@@ -24,8 +24,9 @@
.umb-editor-sub-header.--state-selection {
padding-left: 10px;
padding-right: 10px;
- background-color: @pinkLight;
- border-color: @pinkLight;
+ background-color: @ui-selected-border;
+ border-color: @ui-selected-border;
+ color: @white;
border-radius: 3px;
}
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree-item.less b/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree-item.less
index df01477880..4a483ce3f0 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree-item.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree-item.less
@@ -4,16 +4,16 @@
width: auto;
margin-top:1px;
- .umb-tree-item__label {
- user-select: none;
- }
-
&:hover .umb-tree-item__arrow {
visibility: visible;
cursor: pointer
}
}
+.umb-tree-item__label {
+ user-select: none;
+}
+
.umb-tree-item__arrow {
position: relative;
margin-left: -16px;
@@ -92,18 +92,6 @@
color: @blue;
}
- .umb-options {
-
- &:hover i {
- opacity: .7;
- }
-
- i {
- background: @ui-active-type;
- transition: opacity 120ms ease;
- }
- }
-
a,
.umb-tree-icon,
.umb-tree-item__arrow {
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree.less b/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree.less
index 0a0fb29eed..d06c15cd30 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree.less
@@ -99,6 +99,7 @@ body.touch .umb-tree {
.umb-tree-item__inner {
border: 2px solid transparent;
+ overflow: visible;
}
.umb-tree-header {
@@ -176,9 +177,25 @@ body.touch .umb-tree {
cursor: pointer;
border-radius: @baseBorderRadius;
- &:hover {
- background: @btnBackgroundHighlight;
+ i {
+ height: 5px !important;
+ width: 5px !important;
+ border-radius: 20px;
+ display: inline-block;
+ margin: 0 2px 0 0;
+ background: @ui-active-type;
+
+ &:last-child {
+ margin: 0;
+ }
}
+ &:hover {
+ background: rgba(255, 255, 255, .5);
+ i {
+ background: @ui-active-type-hover;
+ }
+ }
+
// NOTE - We're having to repeat ourselves here due to an .sr-only class appearing in umbraco/lib/font-awesome/css/font-awesome.min.css
&.sr-only--hoverable:hover,
&.sr-only--focusable:focus {
@@ -193,19 +210,6 @@ body.touch .umb-tree {
border-radius: 3px;
}
- i {
- height: 5px !important;
- width: 5px !important;
- border-radius: 20px;
- background: @black;
- display: inline-block;
- margin: 0 2px 0 0;
-
- &:last-child {
- margin: 0;
- }
- }
-
.hide-options & {
display: none !important;
}
@@ -289,9 +293,8 @@ body.touch .umb-tree {
}
.no-access {
- .umb-tree-icon,
- .root-link,
- .umb-tree-item__label {
+ > .umb-tree-item__inner .umb-tree-icon,
+ > .umb-tree-item__inner .umb-tree-item__label {
color: @gray-7;
cursor: not-allowed;
}
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-breadcrumbs.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-breadcrumbs.less
index 0afcfdd1f9..de678f9798 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-breadcrumbs.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-breadcrumbs.less
@@ -4,6 +4,7 @@
margin-left: 0;
display: flex;
flex-wrap: wrap;
+ user-select: none;
}
.umb-breadcrumbs__ancestor {
@@ -12,10 +13,23 @@
}
.umb-breadcrumbs__action {
+ position: relative;
background: transparent;
border: 0 none;
- padding: 0;
- margin-top: -4px;
+ border-radius: 3px;
+ padding: 0 4px;
+ color: @ui-option-type;
+
+ &.--current {
+ font-weight: bold;
+ pointer-events: none;
+ }
+
+ &:hover {
+ color: @ui-option-type-hover;
+ background-color: @white;
+ }
+
}
.umb-breadcrumbs__ancestor-link,
@@ -26,6 +40,7 @@
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
+ padding: 0 4px;
}
.umb-breadcrumbs__ancestor-link {
@@ -39,13 +54,13 @@
.umb-breadcrumbs__separator {
position: relative;
top: 1px;
- margin-left: 5px;
- margin-right: 5px;
+ margin: 0 1px;
+ margin-top: -3px;
color: @gray-7;
}
input.umb-breadcrumbs__add-ancestor {
- height: 25px;
- margin: 0 0 0 3px;
+ height: 24px;
+ margin: -2px 0 -2px 3px;
width: 100px;
}
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-checkmark.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-checkmark.less
index 021fc8cc9b..f82e47bf88 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-checkmark.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-checkmark.less
@@ -2,21 +2,30 @@
border: 2px solid @white;
width: 25px;
height: 25px;
- border: 1px solid @gray-7;
+ border: 1px solid @ui-action-discreet-border;
border-radius: 3px;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
- color: @gray-7;
+ color: @ui-selected-type;
cursor: pointer;
font-size: 15px;
+ &:hover {
+ border-color:@ui-action-discreet-border-hover;
+ color: @ui-selected-type-hover;
+ }
}
.umb-checkmark--checked {
- background: @ui-active;
- border-color: @ui-active;
+ background: @ui-selected-border;
+ border-color: @ui-selected-border;
color: @white;
+ &:hover {
+ background: @ui-selected-border-hover;
+ border-color: @ui-selected-border-hover;
+ color: @white;
+ }
}
.umb-checkmark--xs {
@@ -45,4 +54,4 @@
width: 50px;
height: 50px;
font-size: 20px;
-}
\ No newline at end of file
+}
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-code-snippet.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-code-snippet.less
new file mode 100644
index 0000000000..b372841910
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-code-snippet.less
@@ -0,0 +1,43 @@
+.umb-code-snippet {
+
+ .umb-code-snippet__header {
+ box-sizing: content-box;
+ background-color: @gray-10;
+ display: flex;
+ flex-direction: row;
+ font-size: .8rem;
+ border: 1px solid @gray-8;
+ border-radius: 3px 3px 0 0;
+ border-bottom: 0;
+ margin-top: 16px;
+ min-height: 30px;
+
+ .language {
+ display: flex;
+ align-items: center;
+ justify-content: flex-start;
+ flex-grow: 1;
+ padding: 2px 10px;
+ }
+
+ button {
+ background-color: transparent;
+ border: none;
+ border-left: 1px solid @gray-8;
+ border-radius: 0;
+ color: #000;
+
+ &:hover {
+ background-color: @grayLighter;
+ }
+ }
+ }
+
+ .umb-code-snippet__content {
+ pre {
+ border-radius: 0 0 3px 3px;
+ overflow: auto;
+ white-space: nowrap;
+ }
+ }
+}
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-content-grid.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-content-grid.less
index f27e1e4ec8..622dcb8b0a 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-content-grid.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-content-grid.less
@@ -29,15 +29,15 @@
border-radius: 5px;
box-shadow: 0 0 4px 0 darken(@ui-selected-border, 20), inset 0 0 2px 0 darken(@ui-selected-border, 20);
pointer-events: none;
+ transition: opacity 100ms;
}
-
}
}
.umb-content-grid__item:hover {
&::before {
- opacity: .33;
+ opacity: .2;
}
}
.umb-content-grid__item.-selected:hover {
@@ -46,6 +46,7 @@
}
}
+
.umb-content-grid__icon-container {
height: 75px;
display: flex;
@@ -66,8 +67,10 @@
}
.umb-content-grid__item-name {
+ position: relative;
+ padding: 5px;
+ margin: -5px -5px 15px -5px;
font-weight: bold;
- margin-bottom: 15px;
line-height: 1.4em;
display: inline-flex;
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-editor-navigation-item.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-editor-navigation-item.less
index c26c89a478..6a6a8f9f5b 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-editor-navigation-item.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-editor-navigation-item.less
@@ -4,6 +4,7 @@
&__action,
> a {
+ position: relative;
background: transparent;
text-align: center;
cursor: pointer;
@@ -18,26 +19,20 @@
align-items: center;
justify-content: center;
height: calc(~'@{editorHeaderHeight}'- ~'1px'); // need to offset the 1px border-bottom on .umb-editor-header - avoids overflowing top of the container
- position: relative;
color: @ui-active-type;
- &:focus,
&:hover {
color: @ui-active-type-hover !important;
text-decoration: none;
}
- &:focus {
- outline: none;
- }
-
- &::after {
+ &::before {
content: "";
+ position: absolute;
height: 0px;
left: 8px;
right: 8px;
background-color: @ui-light-active-border;
- position: absolute;
bottom: 0;
border-radius: 3px 3px 0 0;
opacity: 0;
@@ -47,14 +42,13 @@
&.is-active {
color: @ui-light-active-type;
- &::after {
+ &::before {
opacity: 1;
height: 4px;
}
}
}
- &__action:focus,
&__action:active,
& > a:active {
.box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)");
@@ -111,7 +105,6 @@
&__anchor_dropdown {
// inherits from .dropdown-menu
margin: 0;
- overflow: hidden;
// center align horizontal
left: 50%;
@@ -122,7 +115,7 @@
li {
&.is-active a {
- border-left-color: @ui-selected-border;
+ border-left-color: @ui-active;
}
a {
@@ -192,4 +185,4 @@
&::after {
background-color: @red;
}
-}
\ No newline at end of file
+}
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-grid-selector.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-grid-selector.less
index e25349f555..1ae476d584 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-grid-selector.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-grid-selector.less
@@ -41,12 +41,17 @@
margin-top: 10px;
}
+button.umb-grid-selector__item {
+ width: 169px;
+ height: 194px;
+}
+
.umb-grid-selector__item-icon {
- font-size: 50px;
- color: @gray-8;
- display: block;
- line-height: 50px;
- margin-bottom: 15px;
+ font-size: 50px;
+ color: @gray-8;
+ display: block;
+ line-height: 50px;
+ margin-bottom: 15px;
}
.umb-grid-selector__item-label {
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-layout-selector.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-layout-selector.less
index 9ebd6d6e5d..c0ac89622d 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-layout-selector.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-layout-selector.less
@@ -6,7 +6,8 @@
.umb-layout-selector__active-layout {
background: transparent;
box-sizing: border-box;
- border: 1px solid @inputBorder;
+ border: 1px solid @ui-action-discreet-border;
+ color: @ui-action-discreet-type;
cursor: pointer;
height: 30px;
width: 30px;
@@ -17,7 +18,8 @@
}
.umb-layout-selector__active-layout:hover {
- border-color: @inputBorderFocus;
+ border-color: @ui-action-discreet-border-hover;
+ color: @ui-action-discreet-type-hover;
}
.umb-layout-selector__dropdown {
@@ -31,6 +33,7 @@
flex-direction: column;
transform: translate(-50%,0);
left: 50%;
+ border-radius: 3px;
}
.umb-layout-selector__dropdown-item {
@@ -46,11 +49,11 @@
}
.umb-layout-selector__dropdown-item:hover {
- border: 1px solid @gray-8;
+ border: 1px solid @ui-action-discreet-border;
}
.umb-layout-selector__dropdown-item.-active {
- border: 1px solid @blue;
+ border: 1px solid @ui-action-discreet-border-hover;
}
.umb-layout-selector__dropdown-item-icon,
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-media-grid.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-media-grid.less
index 4feadc272c..5d6b7ad962 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-media-grid.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-media-grid.less
@@ -40,25 +40,41 @@
}
}
-.umb-media-grid__item.-selectable {
+.umb-media-grid__item.-selectable,
+.umb-media-grid__item.-folder {// If folders isnt selectable, they opens if clicked, therefor...
cursor: pointer;
-
- .tabbing-active &:focus {
- outline: 2px solid @inputBorderTabFocus;
- }
}
.umb-media-grid__item.-file {
background-color: @white;
}
+.umb-media-grid__item.-folder {
+
+ &.-selectable {
+ .media-grid-item-edit:hover .umb-media-grid__item-name,
+ .media-grid-item-edit:focus .umb-media-grid__item-name {
+ text-decoration: underline;
+ }
+ }
+
+ &.-unselectable {
+ &:hover, &:focus {
+ .umb-media-grid__item-name {
+ text-decoration: underline;
+ }
+ }
+ }
+}
+
+
.umb-media-grid__item.-selected {
color:@ui-selected-type;
.umb-media-grid__item-overlay {
color: @ui-selected-type;
}
}
-.umb-media-grid__item.-selected,
+.umb-media-grid__item.-selected,
.umb-media-grid__item.-selectable:hover {
&::before {
content: "";
@@ -139,10 +155,10 @@
background: fade(@white, 92%);
transition: opacity 150ms;
- &:hover {
+ &.-can-open:hover {
text-decoration: underline;
}
-
+
.tabbing-active &:focus {
opacity: 1;
}
@@ -190,7 +206,7 @@
align-items: center;
color: @black;
transition: opacity 150ms;
-
+
&:hover {
color: @ui-action-discreet-type-hover;
}
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-mini-search.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-mini-search.less
new file mode 100644
index 0000000000..ac15b3dcf8
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-mini-search.less
@@ -0,0 +1,44 @@
+.umb-mini-search {
+ position: relative;
+ display: block;
+
+ .icon {
+ position: absolute;
+ padding: 5px 8px;
+ pointer-events: none;
+ top: 2px;
+ color: @ui-action-discreet-type;
+ transition: color .1s linear;
+ }
+
+ input {
+ width: 0px;
+ padding-left:24px;
+ margin-bottom: 0px;
+ background-color: transparent;
+ border-color: @ui-action-discreet-border;
+ transition: background-color .1s linear, border-color .1s linear, color .1s linear, width .1s ease-in-out, padding-left .1s ease-in-out;
+ }
+
+ &:focus-within, &:hover {
+ .icon {
+ color: @ui-action-discreet-type-hover;
+ }
+ input {
+ color: @ui-action-discreet-border-hover;
+ border-color: @ui-action-discreet-border-hover;
+ }
+ }
+
+ input:focus, &:focus-within input {
+ background-color: white;
+ color: @ui-action-discreet-border-hover;
+ border-color: @ui-action-discreet-border-hover;
+ }
+
+ input:focus, &:focus-within input, &.--has-value input {
+ width: 190px;
+ padding-left:30px;
+ }
+
+}
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-nested-content.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-nested-content.less
index 699496f5d3..4168ab3c39 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-nested-content.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-nested-content.less
@@ -41,11 +41,8 @@
}
.umb-nested-content__item.ui-sortable-placeholder {
- background: @gray-10;
- border: 1px solid @gray-9;
+ margin-top: 1px;
visibility: visible !important;
- height: 55px;
- margin-top: -1px;
}
.umb-nested-content__item--single > .umb-nested-content__content {
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-progress-circle.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-progress-circle.less
index 03816637a7..d8fb3b4d8f 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-progress-circle.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-progress-circle.less
@@ -5,6 +5,7 @@
.umb-progress-circle__view-box {
position: absolute;
transform: rotate(-90deg);
+ right: 0;
}
// circle highlight on progressbar
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-sub-views.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-sub-views.less
index d3ce368356..cc6be8fa37 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-sub-views.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-sub-views.less
@@ -8,7 +8,6 @@
padding-left: 0;
padding-right: 0;
&:focus {
- outline: none;
text-decoration: none;
}
}
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-table.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-table.less
index 94c0318fca..202c488bb4 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-table.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-table.less
@@ -34,8 +34,12 @@
text-decoration: none;
padding: 0;
margin-left: 1px;
+ body:not(.tabbing-active) & {
+ outline: 0;
+ }
}
+
input.umb-table__input {
margin: 0 auto;
}
@@ -47,6 +51,8 @@ input.umb-table__input {
.umb-table-head {
font-size: 14px;
font-weight: bold;
+
+ color: @ui-disabled-type;
}
.umb-table-head__link {
@@ -68,10 +74,12 @@ input.umb-table__input {
.umb-table-head__link.sortable {
cursor: pointer;
+ color: @ui-action-discreet-type;
&:hover {
- text-decoration: none;
- color: @black;
+ color: @ui-action-discreet-type-hover;
}
+
+ outline-offset: 1px;
}
.umb-table-thead__icon {
@@ -129,6 +137,9 @@ input.umb-table__input {
&::before {
opacity:.66;
}
+ .umb-table-body__checkicon {
+ color: @ui-selected-border;
+ }
}
}
@@ -141,21 +152,19 @@ input.umb-table__input {
}
.umb-table-body__link {
+ position: relative;
color: @ui-option-type;
font-size: 14px;
font-weight: bold;
text-decoration: none;
- &:hover, &:focus {
+ &:hover {
color: @ui-option-type-hover;
text-decoration: underline;
- outline: none;
}
}
-.umb-table-body__icon,
-.umb-table-body__icon[class^="icon-"],
-.umb-table-body__icon[class*=" icon-"] {
+.umb-table-body__icon {
margin: 0 auto;
font-size: 20px;
line-height: 20px;
@@ -164,13 +173,11 @@ input.umb-table__input {
text-decoration: none;
}
-.umb-table-body__checkicon,
-.umb-table-body__checkicon[class^="icon-"],
-.umb-table-body__checkicon[class*=" icon-"] {
+.umb-table-body__checkicon {
display: none;
font-size: 18px;
line-height: 20px;
- color: @green;
+ color: @ui-selected-border;
}
.umb-table-body .umb-table__name {
@@ -179,7 +186,8 @@ input.umb-table__input {
font-weight: bold;
a {
color: @ui-option-type;
- &:hover, &:focus {
+ outline-offset: 1px;
+ &:hover {
color: @ui-option-type-hover;
text-decoration: underline;
}
@@ -249,8 +257,8 @@ input.umb-table__input {
flex-flow: row nowrap;
flex: 1 1 5%;
position: relative;
- margin: auto 14px;
- padding: 6px 2px;
+ margin: auto 0;
+ padding: 6px 16px;
text-align: left;
overflow:hidden;
}
@@ -268,8 +276,8 @@ input.umb-table__input {
.umb-table-cell:first-of-type:not(.not-fixed) {
flex: 0 0 25px;
- margin: 0 0 0 15px;
- padding: 15px 0;
+ margin: 0;
+ padding: 15px 0 15px 15px;
}
.umb-table-cell--auto-width {
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/users/umb-user-group-picker-list.less b/src/Umbraco.Web.UI.Client/src/less/components/users/umb-user-group-picker-list.less
index dff78ce627..0a06120b11 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/users/umb-user-group-picker-list.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/users/umb-user-group-picker-list.less
@@ -7,11 +7,17 @@
display: flex;
margin-bottom: 5px;
padding: 10px;
+ position: relative;
}
-.umb-user-group-picker-list-item:active,
-.umb-user-group-picker-list-item:focus {
- text-decoration: none;
+.umb-user-group-picker__action{
+ background: transparent;
+ border: 0 none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
}
.umb-user-group-picker-list-item:hover {
@@ -35,4 +41,4 @@
.umb-user-group-picker-list-item__permission {
font-size: 13px;
color: @gray-4;
-}
\ No newline at end of file
+}
diff --git a/src/Umbraco.Web.UI.Client/src/less/forms.less b/src/Umbraco.Web.UI.Client/src/less/forms.less
index 72abb3ba00..0600c9aab6 100644
--- a/src/Umbraco.Web.UI.Client/src/less/forms.less
+++ b/src/Umbraco.Web.UI.Client/src/less/forms.less
@@ -252,7 +252,7 @@ input[type="color"],
outline: 0;
.tabbing-active & {
- outline: 2px solid @inputBorderTabFocus;
+ outline: 2px solid @ui-outline;
}
}
}
@@ -297,11 +297,11 @@ select[size] {
}
// Focus for select, file, radio, and checkbox
-select:focus,
-input[type="file"]:focus,
-input[type="radio"]:focus,
-input[type="checkbox"]:focus {
- .tab-focus();
+select,
+input[type="file"],
+input[type="radio"],
+input[type="checkbox"] {
+ .umb-outline();
}
diff --git a/src/Umbraco.Web.UI.Client/src/less/hacks.less b/src/Umbraco.Web.UI.Client/src/less/hacks.less
index 3ead4d6905..8d3117febe 100644
--- a/src/Umbraco.Web.UI.Client/src/less/hacks.less
+++ b/src/Umbraco.Web.UI.Client/src/less/hacks.less
@@ -185,40 +185,38 @@ iframe, .content-column-body {
// Inline code
// 1: Revert border radius to match look and feel of 7.4+
-code{
- .border-radius(@baseBorderRadius); // 1
+code {
+ .border-radius(@baseBorderRadius); // 1
}
// Blocks of code
// 1: Wrapping code is unreadable on small devices.
pre {
- display: block;
- padding: (@baseLineHeight - 1) / 2;
- margin: 0 0 @baseLineHeight / 2;
- font-family: @sansFontFamily;
- //font-size: @baseFontSize - 1; // 14px to 13px
- color: @gray-2;
- line-height: @baseLineHeight;
- white-space: pre-wrap; // 1
- overflow-x: auto; // 1
- background-color: @gray-10;
- border: 1px solid @gray-8;
- .border-radius(@baseBorderRadius);
+ display: block;
+ padding: (@baseLineHeight - 1) / 2;
+ margin: 0 0 @baseLineHeight / 2;
+ font-family: @sansFontFamily;
+ color: @gray-2;
+ line-height: @baseLineHeight;
+ white-space: pre-wrap; // 1
+ overflow-x: auto; // 1
+ background-color: @brownGrayLight;
+ border: 1px solid @gray-8;
+ .border-radius(@baseBorderRadius);
+ // Make prettyprint styles more spaced out for readability
+ &.prettyprint {
+ margin-bottom: @baseLineHeight;
+ }
- // Make prettyprint styles more spaced out for readability
- &.prettyprint {
- margin-bottom: @baseLineHeight;
- }
-
- // Account for some code outputs that place code tags in pre tags
- code {
- padding: 0;
- white-space: pre; // 1
- word-wrap: normal; // 1
- background-color: transparent;
- border: 0;
- }
+ // Account for some code outputs that place code tags in pre tags
+ code {
+ padding: 0;
+ white-space: pre; // 1
+ word-wrap: normal; // 1
+ background-color: transparent;
+ border: 0;
+ }
}
/* Styling for content/media sort order dialog */
diff --git a/src/Umbraco.Web.UI.Client/src/less/installer.less b/src/Umbraco.Web.UI.Client/src/less/installer.less
index e964ed3c6f..4e24161e59 100644
--- a/src/Umbraco.Web.UI.Client/src/less/installer.less
+++ b/src/Umbraco.Web.UI.Client/src/less/installer.less
@@ -3,6 +3,7 @@
@import "variables.less"; // Modify this for custom colors, font-sizes, etc
@import "colors.less";
@import "mixins.less";
+@import "application/umb-outline.less";
@import "buttons.less";
@import "forms.less";
diff --git a/src/Umbraco.Web.UI.Client/src/less/listview.less b/src/Umbraco.Web.UI.Client/src/less/listview.less
index 975dbdbd4a..fe8af6dbc4 100644
--- a/src/Umbraco.Web.UI.Client/src/less/listview.less
+++ b/src/Umbraco.Web.UI.Client/src/less/listview.less
@@ -1,6 +1,10 @@
// Listview
// -------------------------
+.umb-listview {
+ min-height: 100px;
+}
+
.umb-listview table {
border: 1px solid @gray-8;
}
@@ -43,6 +47,15 @@
/* add padding */
.left-addon input[type="text"] { padding-left: 30px !important; padding-right: 6px; }
.right-addon input[type="text"] { padding-right: 30px; padding-left: 6px !important; }
+
+ &__label-icon{
+ width: 30px;
+ height: 30px;
+ position: absolute;
+ top: -1px;
+ left:0;
+ margin:0
+ }
}
.umb-listview table form {
@@ -136,7 +149,36 @@
/* TEMP */
.umb-minilistview {
- .umb-table-row.not-allowed { opacity: 0.6; cursor: not-allowed; }
+ .umb-table-row.not-allowed {
+ opacity: 0.6;
+ cursor: not-allowed;
+ }
+
+ div.umb-mini-list-view__breadcrumb {
+ margin-bottom: 10px;
+ }
+
+ div.no-display {
+ display: none
+ }
+
+ div.umb-table-cell-padding {
+ padding-top: 8px;
+ padding-bottom: 8px;
+ }
+
+ div.umb-table-cell .form-search {
+ width: 100%;
+ margin-right: 0;
+
+ input {
+ width: 100%;
+ }
+
+ .icon-search {
+ font-size: 14px;
+ }
+ }
}
.umb-listview .table-striped tbody td {
diff --git a/src/Umbraco.Web.UI.Client/src/less/main.less b/src/Umbraco.Web.UI.Client/src/less/main.less
index 0d646d11c6..b34f313435 100644
--- a/src/Umbraco.Web.UI.Client/src/less/main.less
+++ b/src/Umbraco.Web.UI.Client/src/less/main.less
@@ -117,6 +117,12 @@ h5.-black {
}
.umb-control-group {
position: relative;
+
+ &.umb-control-group__listview {
+ // position: relative messes up the listview status messages (e.g. "no search results")
+ position: unset;
+ }
+
&::after {
content: '';
display:block;
diff --git a/src/Umbraco.Web.UI.Client/src/less/mixins.less b/src/Umbraco.Web.UI.Client/src/less/mixins.less
index 21b9c5c550..efc0178ca2 100644
--- a/src/Umbraco.Web.UI.Client/src/less/mixins.less
+++ b/src/Umbraco.Web.UI.Client/src/less/mixins.less
@@ -30,7 +30,6 @@
outline: thin dotted @gray-3;
// Webkit
outline: 5px auto -webkit-focus-ring-color;
- outline-offset: -2px;
}
// Center-align a block level element
@@ -435,7 +434,7 @@
// Button backgrounds
// ------------------
-.buttonBackground(@startColor, @hoverColor: @startColor, @textColor: @white, @textColorHover: @textColor) {
+.buttonBackground(@startColor, @hoverColor: @startColor, @textColor: @white, @textColorHover: @textColor, @disabledColor: @sand-1, @disabledTextColor: @white) {
color: @textColor;
border-color: @startColor @startColor darken(@startColor, 15%);
@@ -449,14 +448,14 @@
}
// in these cases the gradient won't cover the background, so we override
- &:hover, &:focus, &:active, &.active {
+ &:hover {
color: @textColorHover;
background-color: @hoverColor;
}
&.disabled, &[disabled] {
- color: @white;
- background-color: @sand-1;
+ background-color: @disabledColor;
+ color: @disabledTextColor;
}
}
diff --git a/src/Umbraco.Web.UI.Client/src/less/navs.less b/src/Umbraco.Web.UI.Client/src/less/navs.less
index 5b97464e31..c347404619 100644
--- a/src/Umbraco.Web.UI.Client/src/less/navs.less
+++ b/src/Umbraco.Web.UI.Client/src/less/navs.less
@@ -233,11 +233,14 @@
}
.dropdown-menu > li > a {
+ position: relative;
padding: 8px 20px;
color: @ui-option-type;
+ text-decoration: none;
}
.dropdown-menu > li > button {
+ position: relative;
background: transparent;
border: 0;
padding: 8px 20px;
@@ -253,11 +256,9 @@
}
.dropdown-menu > li > a:hover,
-.dropdown-menu > li > a:focus,
.dropdown-menu > li > button:hover,
-.dropdown-menu > li > button:focus,
.dropdown-submenu:hover > a,
-.dropdown-submenu:focus > a {
+.dropdown-submenu:hover > button {
color: @ui-option-type-hover;
background: @ui-option-hover;
}
@@ -300,8 +301,7 @@
// Active:hover/:focus dropdown links
// -------------------------
-.nav > .dropdown.active > a:hover,
-.nav > .dropdown.active > a:focus {
+.nav > .dropdown.active > a:hover {
cursor: pointer;
}
@@ -309,24 +309,21 @@
// -------------------------
.nav-tabs .open .dropdown-toggle,
.nav-pills .open .dropdown-toggle,
-.nav > li.dropdown.open.active > a:hover,
-.nav > li.dropdown.open.active > a:focus {
+.nav > li.dropdown.open.active > a:hover {
/*color: @white;*/
background-color: @gray-8;
border-color: @gray-8;
}
.nav li.dropdown.open .caret,
.nav li.dropdown.open.active .caret,
-.nav li.dropdown.open a:hover .caret,
-.nav li.dropdown.open a:focus .caret {
+.nav li.dropdown.open a:hover .caret {
border-top-color: @white;
border-bottom-color: @white;
.opacity(100);
}
// Dropdowns in stacked tabs
-.tabs-stacked .open > a:hover,
-.tabs-stacked .open > a:focus {
+.tabs-stacked .open > a:hover {
border-color: @gray-8;
}
@@ -377,15 +374,13 @@
}
.tabs-below > .nav-tabs > li > a {
.border-radius(0 0 4px 4px);
- &:hover,
- &:focus {
+ &:hover {
border-bottom-color: transparent;
border-top-color: @gray-8;
}
}
.tabs-below > .nav-tabs > .active > a,
-.tabs-below > .nav-tabs > .active > a:hover,
-.tabs-below > .nav-tabs > .active > a:focus {
+.tabs-below > .nav-tabs > .active > a:hover {
border-color: transparent @gray-8 @gray-8 @gray-8;
}
@@ -414,13 +409,11 @@
margin-right: -1px;
.border-radius(4px 0 0 4px);
}
-.tabs-left > .nav-tabs > li > a:hover,
-.tabs-left > .nav-tabs > li > a:focus {
+.tabs-left > .nav-tabs > li > a:hover {
border-color: @gray-10 @gray-8 @gray-10 @gray-10;
}
.tabs-left > .nav-tabs .active > a,
-.tabs-left > .nav-tabs .active > a:hover,
-.tabs-left > .nav-tabs .active > a:focus {
+.tabs-left > .nav-tabs .active > a:hover {
border-color: @gray-8 transparent @gray-8 @gray-8;
*border-right-color: @white;
}
@@ -435,13 +428,11 @@
margin-left: -1px;
.border-radius(0 4px 4px 0);
}
-.tabs-right > .nav-tabs > li > a:hover,
-.tabs-right > .nav-tabs > li > a:focus {
+.tabs-right > .nav-tabs > li > a:hover {
border-color: @gray-10 @gray-10 @gray-10 @gray-8;
}
.tabs-right > .nav-tabs .active > a,
-.tabs-right > .nav-tabs .active > a:hover,
-.tabs-right > .nav-tabs .active > a:focus {
+.tabs-right > .nav-tabs .active > a:hover {
border-color: @gray-8 @gray-8 @gray-8 transparent;
*border-left-color: @white;
}
@@ -456,8 +447,7 @@
color: @gray-8;
}
// Nuke hover/focus effects
-.nav > .disabled > a:hover,
-.nav > .disabled > a:focus {
+.nav > .disabled > a:hover {
text-decoration: none;
background-color: transparent;
cursor: default;
diff --git a/src/Umbraco.Web.UI.Client/src/less/panel.less b/src/Umbraco.Web.UI.Client/src/less/panel.less
index bad0ab9715..40c70f5331 100644
--- a/src/Umbraco.Web.UI.Client/src/less/panel.less
+++ b/src/Umbraco.Web.UI.Client/src/less/panel.less
@@ -341,6 +341,7 @@
.umb-panel-header-icon {
cursor: pointer;
margin-right: 5px;
+ margin-top: -6px;
height: 50px;
display: flex;
justify-content: center;
diff --git a/src/Umbraco.Web.UI.Client/src/less/property-editors.less b/src/Umbraco.Web.UI.Client/src/less/property-editors.less
index 5a71635c4d..112f94572d 100644
--- a/src/Umbraco.Web.UI.Client/src/less/property-editors.less
+++ b/src/Umbraco.Web.UI.Client/src/less/property-editors.less
@@ -249,26 +249,11 @@
transition: all 150ms ease-in-out;
- &:focus,
+ &:active,
&:hover {
color: @ui-action-discreet-type-hover;
border-color: @ui-action-discreet-type-hover;
}
-
- &:focus {
- outline: none;
- .tabbing-active &:after {
- content: '';
- position: absolute;
- z-index: 10000;
- top: -6px;
- bottom: -6px;
- left: -6px;
- right: -6px;
- border-radius: 3px;
- box-shadow: 0 0 2px @blueMid, inset 0 0 2px 1px @blueMid;
- }
- }
}
.umb-mediapicker .label {
diff --git a/src/Umbraco.Web.UI.Client/src/less/variables.less b/src/Umbraco.Web.UI.Client/src/less/variables.less
index 6071c4a5ef..a906bc0eed 100644
--- a/src/Umbraco.Web.UI.Client/src/less/variables.less
+++ b/src/Umbraco.Web.UI.Client/src/less/variables.less
@@ -108,6 +108,7 @@
//@blueLight: #4f89de;
@blue: #2E8AEA;
@blueMid: #2152A3;// updated 2019
+@blueMidLight: rgb(99, 174, 236);
@blueDark: #3544b1;// updated 2019
@blueExtraDark: #1b264f;// added 2019
@blueLight: #ADD8E6;
@@ -139,6 +140,9 @@
@ui-option-disabled-type-hover: @gray-5;
@ui-option-disabled-hover: @sand-7;
+@ui-disabled-type: @gray-6;
+@ui-disabled-border: @gray-6;
+
//@ui-active: #346ab3;
@ui-active: @pinkLight;
@ui-active-blur: @brownLight;
@@ -149,8 +153,8 @@
@ui-selected-hover: ligthen(@sand-5, 10);
@ui-selected-type: @blueExtraDark;
@ui-selected-type-hover: @blueMid;
-@ui-selected-border: @pinkLight;
-@ui-selected-border-hover: darken(@pinkLight, 10);
+@ui-selected-border: @blueDark;
+@ui-selected-border-hover: darken(@blueDark, 10);
@ui-light-border: @pinkLight;
@ui-light-type: @gray-4;
@@ -175,6 +179,8 @@
@ui-action-discreet-border: @gray-7;
@ui-action-discreet-border-hover: @blueMid;
+@ui-outline: @blueMidLight;
+
@type-white: @white;
@type-black: @blueNight;
@@ -255,7 +261,7 @@
// Buttons
// -------------------------
@btnBackground: @gray-9;
-@btnBackgroundHighlight: @gray-9;
+@btnBackgroundHighlight: @gray-10;
@btnBorder: @gray-9;
@btnPrimaryBackground: @ui-btn-positive;
@@ -293,7 +299,7 @@
@inputBackground: @white;
@inputBorder: @gray-8;
@inputBorderFocus: @gray-7;
-@inputBorderTabFocus: @blueExtraDark;
+@inputBorderTabFocus: @ui-outline;
@inputBorderRadius: 0;
@inputDisabledBackground: @gray-10;
@formActionsBackground: @gray-9;
@@ -448,7 +454,7 @@
@successBorder: transparent;
@infoText: @white;
-@infoBackground: @turquoise-d1;
+@infoBackground: @blueDark;
@infoBorder: transparent;
@alertBorderRadius: 0;
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/drawers/help/help.html b/src/Umbraco.Web.UI.Client/src/views/common/drawers/help/help.html
index 4ae3121098..96f4a404bc 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/drawers/help/help.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/drawers/help/help.html
@@ -17,17 +17,21 @@
{{model.result.queryExpression}}
-
-
+
+