true to hide icon.
@param {string=} alias show and edit the content alias.
+@param {boolean=} aliasLocked Set to true to lock the alias.
@param {boolean=} hideAlias Set to true to hide alias.
@param {string=} description Add a description to the content.
@param {boolean=} hideDescription Set to true to hide description.
@@ -347,6 +348,7 @@ Use this directive to construct a header inside the main editor window.
icon: "=",
hideIcon: "@",
alias: "=",
+ aliasLocked: "<",
hideAlias: "=",
description: "=",
hideDescription: "@",
diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/property/umbproperty.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/property/umbproperty.directive.js
index 06b9e51fba..31e797c6b4 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/property/umbproperty.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/property/umbproperty.directive.js
@@ -4,7 +4,7 @@
* @restrict E
**/
angular.module("umbraco.directives")
- .directive('umbProperty', function (umbPropEditorHelper, userService) {
+ .directive('umbProperty', function (userService) {
return {
scope: {
property: "=",
@@ -17,7 +17,7 @@ angular.module("umbraco.directives")
templateUrl: 'views/components/property/umb-property.html',
link: function (scope) {
- scope.propertyEditorAPI = {};
+ scope.propertyActions = [];
userService.getCurrentUser().then(function (u) {
var isAdmin = u.userGroups.indexOf('admin') !== -1;
@@ -25,28 +25,20 @@ angular.module("umbraco.directives")
});
},
//Define a controller for this directive to expose APIs to other directives
- controller: function ($scope, $timeout) {
+ controller: function ($scope) {
var self = this;
-
+
//set the API properties/methods
self.property = $scope.property;
self.setPropertyError = function (errorMsg) {
$scope.property.propertyErrorMessage = errorMsg;
};
-
- var unsubscribe = $scope.$on("ExposePropertyEditorAPI", function(event, api) {
-
- //avoid eventual parent properties to capture this.
- event.stopPropagation();
-
- $scope.propertyEditorAPI = api;
- });
- $scope.$on("$destroy", function () {
- unsubscribe();
- });
+ self.setPropertyActions = function(actions) {
+ $scope.propertyActions = actions;
+ };
}
};
diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/tree/umbtree.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/tree/umbtree.directive.js
index 2bd93a4b27..3d743c7e9a 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/tree/umbtree.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/tree/umbtree.directive.js
@@ -65,6 +65,7 @@ function umbTreeDirective($q, $rootScope, treeService, notificationsService, use
vm.reloadNode = reloadNode;
vm.syncTree = syncTree;
vm.loadChildren = loadChildren;
+ vm.hasTree = hasTree;
//wire up the exposed api object for hosting controllers
if ($scope.api) {
@@ -72,6 +73,7 @@ function umbTreeDirective($q, $rootScope, treeService, notificationsService, use
$scope.api.load = vm.load;
$scope.api.reloadNode = vm.reloadNode;
$scope.api.syncTree = vm.syncTree;
+ $scope.api.hasTree = vm.hasTree;
}
//flag to track the last loaded section when the tree 'un-loads'. We use this to determine if we should
@@ -203,6 +205,25 @@ function umbTreeDirective($q, $rootScope, treeService, notificationsService, use
});
}
+ //given a tree alias, this will search the current section tree for the specified tree alias and set the current active tree to it's root node
+ function hasTree(treeAlias) {
+
+ if (!$scope.tree) {
+ throw "Err in umbtree.directive.loadActiveTree, $scope.tree is null";
+ }
+
+ if (!treeAlias) {
+ return false;
+ }
+
+ var treeRoots = getTreeRootNodes();
+ var foundTree = _.find(treeRoots, function (node) {
+ return node.metaData.treeAlias.toUpperCase() === treeAlias.toUpperCase();
+ });
+
+ return foundTree !== undefined;
+ }
+
//given a tree alias, this will search the current section tree for the specified tree alias and set the current active tree to it's root node
function loadActiveTree(treeAlias) {
diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/tree/umbtreeitem.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/tree/umbtreeitem.directive.js
index 975b10d678..0a6eeb8835 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/tree/umbtreeitem.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/tree/umbtreeitem.directive.js
@@ -90,7 +90,9 @@ angular.module("umbraco.directives")
css.push("umb-tree-item--deleted");
}
- if (actionNode) {
+ // checking the nodeType to ensure that this node and actionNode is from the same treeAlias
+ if (actionNode && actionNode.nodeType === node.nodeType) {
+
if (actionNode.id === node.id && String(node.id) !== "-1") {
css.push("active");
}
diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbconfirm.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbconfirm.directive.js
index 1ddd09357a..9114cfb1c1 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbconfirm.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbconfirm.directive.js
@@ -56,6 +56,7 @@ function confirmDirective() {
onCancel: '=',
caption: '@',
confirmButtonStyle: '@',
+ confirmDisabled: '',
confirmLabelKey: '@'
},
link: function (scope, element, attr, ctrl) {
diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbgroupsbuilder.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbgroupsbuilder.directive.js
index 07b690ad2b..3c9e300f92 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbgroupsbuilder.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbgroupsbuilder.directive.js
@@ -549,7 +549,9 @@
property.dataTypeIcon = propertyModel.dataTypeIcon;
property.dataTypeName = propertyModel.dataTypeName;
property.validation.mandatory = propertyModel.validation.mandatory;
+ property.validation.mandatoryMessage = propertyModel.validation.mandatoryMessage;
property.validation.pattern = propertyModel.validation.pattern;
+ property.validation.patternMessage = propertyModel.validation.patternMessage;
property.showOnMemberProfile = propertyModel.showOnMemberProfile;
property.memberCanEdit = propertyModel.memberCanEdit;
property.isSensitiveValue = propertyModel.isSensitiveValue;
@@ -632,7 +634,9 @@
propertyState: "init",
validation: {
mandatory: false,
- pattern: null
+ mandatoryMessage: null,
+ pattern: null,
+ patternMessage: null
}
};
diff --git a/src/Umbraco.Web.UI.Client/src/common/resources/datatype.resource.js b/src/Umbraco.Web.UI.Client/src/common/resources/datatype.resource.js
index 7aedfccacf..60a5d235fe 100644
--- a/src/Umbraco.Web.UI.Client/src/common/resources/datatype.resource.js
+++ b/src/Umbraco.Web.UI.Client/src/common/resources/datatype.resource.js
@@ -389,7 +389,7 @@ function dataTypeResource($q, $http, umbDataFormatter, umbRequestHelper) {
(umbRequestHelper.getApiUrl(
"dataTypeApiBaseUrl",
"PostRenameContainer",
- { id: id, name: name })),
+ { id: id, name: encodeURIComponent(name) })),
"Failed to rename the folder with id " + id);
}
};
diff --git a/src/Umbraco.Web.UI.Client/src/common/services/navigation.service.js b/src/Umbraco.Web.UI.Client/src/common/services/navigation.service.js
index ce70e9f543..8d1caab850 100644
--- a/src/Umbraco.Web.UI.Client/src/common/services/navigation.service.js
+++ b/src/Umbraco.Web.UI.Client/src/common/services/navigation.service.js
@@ -338,6 +338,22 @@ function navigationService($routeParams, $location, $q, $injector, eventsService
});
},
+ /**
+ * @ngdoc method
+ * @name umbraco.services.navigationService#hasTree
+ * @methodOf umbraco.services.navigationService
+ *
+ * @description
+ * Checks if a tree with the given alias exists.
+ *
+ * @param {String} treeAlias the tree alias to check
+ */
+ hasTree: function (treeAlias) {
+ return navReadyPromise.promise.then(function () {
+ return mainTreeApi.hasTree(treeAlias);
+ });
+ },
+
/**
Internal method that should ONLY be used by the legacy API wrapper, the legacy API used to
have to set an active tree and then sync, the new API does this in one method by using syncTree
diff --git a/src/Umbraco.Web.UI.Client/src/common/services/overlay.service.js b/src/Umbraco.Web.UI.Client/src/common/services/overlay.service.js
index 0b8965e4fe..119f40e114 100644
--- a/src/Umbraco.Web.UI.Client/src/common/services/overlay.service.js
+++ b/src/Umbraco.Web.UI.Client/src/common/services/overlay.service.js
@@ -89,6 +89,7 @@
}
function confirmDelete(overlay) {
+ overlay.confirmType = "delete";
confirm(overlay);
}
diff --git a/src/Umbraco.Web.UI.Client/src/common/services/propertyeditor.service.js b/src/Umbraco.Web.UI.Client/src/common/services/propertyeditor.service.js
deleted file mode 100644
index 0b24e78567..0000000000
--- a/src/Umbraco.Web.UI.Client/src/common/services/propertyeditor.service.js
+++ /dev/null
@@ -1,29 +0,0 @@
-(function() {
- 'use strict';
-
- function propertyEditorService() {
- /**
- * @ngdoc function
- * @name umbraco.services.propertyEditorService#expose
- * @methodOf umbraco.services.propertyEditorService
- * @function
- *
- * @param {object} scope An object containing API for the PropertyEditor
- */
- function exposeAPI(scope, api) {
- if (!scope) {
- throw "scope cannot be null";
- }
- if (!api) {
- throw "api cannot be null";
- }
- scope.$emit("ExposePropertyEditorAPI", api);
- }
-
- return {
- exposeAPI: exposeAPI
- };
- }
-
- angular.module('umbraco.services').factory('propertyEditorService', propertyEditorService);
-})();
diff --git a/src/Umbraco.Web.UI.Client/src/common/services/tabbable.service.js b/src/Umbraco.Web.UI.Client/src/common/services/tabbable.service.js
index 3782128af6..35f0d8a34a 100644
--- a/src/Umbraco.Web.UI.Client/src/common/services/tabbable.service.js
+++ b/src/Umbraco.Web.UI.Client/src/common/services/tabbable.service.js
@@ -184,7 +184,13 @@
});
if (cached) return cached[1];
- nodeComputedStyle = nodeComputedStyle || this.doc.defaultView.getComputedStyle(node);
+ if (!nodeComputedStyle) {
+ if (node instanceof DocumentFragment) {
+ return true;// though DocumentFragment doesn't directly have display 'none', we know that it will never be visible, and therefore we return true. (and do not cache this, cause it will change if appended to the DOM)
+ } else {
+ nodeComputedStyle = this.doc.defaultView.getComputedStyle(node);
+ }
+ }
var result = false;
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 4d4f8792cf..b0941bd5ad 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
@@ -543,11 +543,11 @@ function tinyMceService($rootScope, $q, imageHelper, $locale, $http, $timeout, s
'contenteditable': false
},
embed.preview);
-
- if (activeElement) {
+
+ // Only replace if activeElement is an Embed element.
+ if (activeElement && activeElement.nodeName.toUpperCase() === "DIV" && activeElement.classList.contains("embeditem")){
activeElement.replaceWith(wrapper); // directly replaces the html node
- }
- else {
+ } else {
editor.selection.setNode(wrapper);
}
},
diff --git a/src/Umbraco.Web.UI.Client/src/common/services/validationmessage.service.js b/src/Umbraco.Web.UI.Client/src/common/services/validationmessage.service.js
new file mode 100644
index 0000000000..5e0d8b876b
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/common/services/validationmessage.service.js
@@ -0,0 +1,34 @@
+(function () {
+ 'use strict';
+
+ function validationMessageService($q, localizationService) {
+
+ // Gets the message to use for when a mandatory field isn't completed.
+ // Will either use the one provided on the property type's validation object
+ // or a localised default.
+ function getMandatoryMessage(validation) {
+ if (!validation) {
+ return $q.when("");
+ }
+
+ if (validation.mandatoryMessage) {
+ return $q.when(validation.mandatoryMessage);
+ } else {
+ return localizationService.localize("general_required").then(function (value) {
+ return $q.when(value);
+ });
+ }
+ }
+
+ var service = {
+ getMandatoryMessage: getMandatoryMessage
+ };
+
+ return service;
+
+ }
+
+ angular.module('umbraco.services').factory('validationMessageService', validationMessageService);
+
+
+})();
diff --git a/src/Umbraco.Web.UI.Client/src/less/belle.less b/src/Umbraco.Web.UI.Client/src/less/belle.less
index 391fafb3fa..f6490fc79b 100644
--- a/src/Umbraco.Web.UI.Client/src/less/belle.less
+++ b/src/Umbraco.Web.UI.Client/src/less/belle.less
@@ -2,6 +2,7 @@
// Core variables and mixins
@import "fonts.less"; // Loading fonts
@import "variables.less"; // Modify this for custom colors, font-sizes, etc
+@import "colors.less"; // Colors from variables but as specific CSS classes
@import "mixins.less";
// CSS Reset
@@ -74,9 +75,8 @@
@import "sections.less";
@import "helveticons.less";
@import "main.less";
-@import "listview.less";
+@import "listview.less";
@import "gridview.less";
-@import "footer.less";
@import "filter-toggle.less";
@import "forms/umb-validation-label.less";
@@ -206,7 +206,6 @@
@import "utilities/_cursor.less";
//page specific styles
-@import "pages/document-type-editor.less";
@import "pages/login.less";
@import "pages/welcome-dashboard.less";
diff --git a/src/Umbraco.Web.UI.Client/src/less/canvas-designer.less b/src/Umbraco.Web.UI.Client/src/less/canvas-designer.less
index b36c73a61a..7135692ae8 100644
--- a/src/Umbraco.Web.UI.Client/src/less/canvas-designer.less
+++ b/src/Umbraco.Web.UI.Client/src/less/canvas-designer.less
@@ -1,5 +1,7 @@
@import "helveticons.less";
+@import "variables.less";
+@import "application/umb-outline.less";
/******* font-face *******/
@@ -13,730 +15,197 @@
/****************************/
body {
- overflow: hidden;
- height: 100%;
- width: 100%;
- width: calc(~"100% - 80px"); // 80px is the fixed left menu for toggling the different browser sizes
position: absolute;
+ overflow: hidden;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 100%;
+ height: calc(~"100% - 40px");
+ width: 100%;
padding: 0;
margin: 0;
- font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
- font-size: 14px;
- line-height: 20px;
- color: #343434;
- transition: all 0.2s ease-in-out;
- padding-left:80px;
+ padding-bottom:40px;
+ background-color: @brownGrayExtraLight;
}
-h4 {
- margin: 0;
- font-size: 16px;
- background-color: #535353;
- color: #b3b3b3;
- text-transform: uppercase;
- position: initial;
- display: block;
- padding: 5px 10px;
- font-size: 12px;
- font-weight: normal;
-}
-
-h5 {
- margin: 0 0 6px 0;
- font-size: 12px;
-}
-
-ul {
- list-style:none;
- margin:0;
- padding:0;
-}
-
-a, a:hover{
- color:#333;
- text-decoration:none;
-}
-
-
/****************************/
/* General class */
/****************************/
-.right {
- float:right;
- display:inline-block;
-}
-
-.left {
- float:left;
- display:inline-block;
-}
-
-.leftOpen {
- padding-left: 330px
-}
-
-.wait {
- display: block;
- height: 100%;
- width: 100%;
- background:#fff center center url(../img/loader.gif) no-repeat;
-}
-
-/****************************/
-/* Group button */
-/****************************/
-
-.btn-group {
- float: right;
- margin-right: 10px;
-}
-
-.btn {
- display: inline-block;
- padding: 4px 12px;
- margin-bottom: 0;
- font-size: 14px;
- line-height: 20px;
- color: #000000;
- text-align: center;
- vertical-align: middle;
- cursor: pointer;
- background: #f2f2f2;
- border: 1px solid #cccccc;
- border-radius: 2px;
- box-shadow: none;
-}
-
-.btn-group > .btn + .dropdown-toggle {
- box-shadow: none;
-}
-
-.btn-group > .btn + .btn {
- margin-left: -6px;
-}
-
-.btn-group > .btn + .dropdown-toggle {
- padding-right: 8px;
- padding-left: 8px;
- box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.125), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-}
-
-.btn-group > .btn:last-child, .btn-group > .dropdown-toggle {
- border-top-right-radius: 2px;
- border-bottom-right-radius: 2px;
-}
-
-.caret {
- display: inline-block;
- width: 0;
- height: 0;
- vertical-align: top;
- border-top: 4px solid #FFFFFF;
- border-right: 4px solid transparent;
- border-left: 4px solid transparent;
- content: "";
- border-top: 0;
- border-bottom: 4px solid #ffffff;
- margin-top: 8px;
- margin-left: 0;
-}
-
-.dropdown-menu {
+.menu-bar {
position: absolute;
- display: block;
- top: auto;
- right: 0;
- z-index: 1000;
- display: block;
- float: left;
- min-width: 160px;
- padding: 5px 0;
- margin: -96px 10px 0 0;
- margin-bottom: 1px;
- list-style: none;
- background-color: #ffffff;
- border: 1px solid #ccc;
- border: 1px solid rgba(0, 0, 0, 0.2);
- border-radius: 6px;
- box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
- background-clip: padding-box;
-}
-
-.dropdown-menu > li > a,
-.dropdown-menu > li > button {
- display: block;
- padding: 3px 20px;
- clear: both;
- font-weight: normal;
- line-height: 20px;
- color: black;
- white-space: nowrap;
- cursor:pointer;
-}
-
-.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 {
- color: #000000;
- background: #e4e0dd;
-}
-
-/****************************/
-/* Speech bubble */
-/****************************/
-
-#speechbubble {
- position: absolute;
- right: 0;
- bottom: 40px;
+ bottom:0;
left: 0;
- z-index: 9999;
- display: none;
- padding: 0;
- margin: auto;
- margin-left: 300px;
- text-align: left;
- background: none;
- border: none;
- border-bottom: none;
-}
+ right: 0;
+ background-color: @blueExtraDark;
+ color:@white;
-#speechbubble p {
- position: relative;
- padding: 8px 30px 8px 20px;
- margin: auto;
- margin-top: 5px;
- font-size: 12px;
- color: #ffffff;
- text-shadow: none;
- background-color: #46a546;
- border: none;
- border-color: transparent;
- border-radius: 5px 0 0 5px;
-}
-
-
-/****************************/
-/* Main section menu */
-/****************************/
-
-.more-options i {
- display: inline-block;
- width: 5px !important;
- height: 5px !important;
- margin: 5px 1px 7px 0;
- background: #d9d9d9;
- border-radius: 20px;
-}
-
-.fix-left-menu {
- position: fixed;
- top: 0;
- left: 0;
- width: 80px;
- height: 100%;
- padding: 0;
- margin-left: -80px;
font-family: "Lato", Helvetica, Arial, sans-serif;
- font-size: 13px;
+ font-size: 12px;
line-height: 16px;
- background: #1b264f;
- transition: all 0.2s ease-in-out;
- z-index: 9999;
+
+ animation: menu-bar-animation 1.2s;
+ animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
+
}
-.avatar {
- text-align:center;
- padding: 27px 0 29px 0;
- border-bottom: 1px solid #2E2246;
-}
+@keyframes menu-bar-animation {
+ 0% {
+ bottom: -50px;
+ }
+ 40% {
+ bottom: -50px;
+ }
+ 80% {
+ bottom: 0px;
+ }
+ }
-.help {
- position: absolute;
- bottom: 0;
- left: 0;
- display: block;
- width: 100%;
- margin: 0;
- font-size: 30px;
- text-align: center;
- color: #D8D7D9;
- opacity: 0.4;
- transition: all .3s linear;
-}
+.menu-bar__right-part {
+ float: right;
+ display: flex;
+ flex: row;
-ul.sections {
- display: block;
- background: #1b264f;
- position:absolute;
- top: 90px;
- width: 80px;
- transition: all 0.2s ease-in-out;
- list-style:none;
- margin:0;
- padding:0;
- margin-left: -80px;
- overflow: auto;
- overflow-x: hidden;
- height: calc(100% - 91px);
-
- &::-webkit-scrollbar {
- width: 0px;
- background: transparent;
+ > div, > button {
+ border-left: 1px solid rgba(255, 255, 255, .25);
}
}
-ul.sections li {
- display: block;
- border-left: 4px #1b264f solid;
- transition: all .3s linear;
+.menu-bar__title {
+ display: inline-block;
+ padding: 11px 15px;
+ font-weight: bold;
+ font-size: 13px;
+}
+
+.menu-bar__button {
+ display: inline-block;
+ padding: 11px 15px;
+ height: 40px;
+ border:none;
+ background-color: @blueExtraDark;
+
+ text-align: left;
+ font: inherit;
+ color: inherit;
cursor: pointer;
-}
-.fix-left-menu ul.sections li a span,
-.fix-left-menu ul.sections li a i {
- color: #fff;
- opacity: .7;
- transition: all .3s linear;
-}
+ transition: color 120ms linear, background-color 120ms linear;
+
+ .icon {
+ margin-right: 10px;
+ font-size: 18px;
+ vertical-align: middle;
+ }
+
+ span {
+ vertical-align: middle;
+ }
+
+ > svg {
+ display: inline-block;
+ width: 14px;
+ height: 14px;
+ fill: #fff;
+ margin-right: 10px;
+ vertical-align: middle;
+ transition: fill 120ms linear;
+ }
-ul.sections li a {
- display: block;
- width: 100%;
- height: 100%;
- padding: 20px 4px 15px 0;
- margin: 0 0 0 -4px;
- text-align: center;
- text-decoration: none;
- border-bottom: 1px solid #2E2246;
&:hover {
- span, i {
- opacity: 1;
- color:#fff;
+ background-color: lighten(@blueExtraDark, 4%);
+ }
+ &.--active {
+ color: @pinkLight;
+ > svg {
+ fill: @pinkLight;
}
}
}
-ul.sections li a i {
- font-size: 30px;
- opacity: 0.8;
-}
+.preview-menu-option {
-ul.sections li a span {
- display: block;
- font-size: 10px;
- line-height: 1.4em;
- opacity: 0.8;
-}
-
-ul.sections li.current {
- border-left: 4px #f5c1bc solid;
-}
-
-ul.sections li.current a i {
- color: #f5c1bc;
-}
-
-ul.sections li.current {
- border-left: 4px #f5c1bc solid;
-}
-
-ul.sections li:hover a i,
-ul.sections li:hover a span {
- opacity: 1;
-}
-
-.fix-left-menu:hover .help {
- opacity: 1;
-}
-
-.fix-left-menu.selected,
-.sections.selected {
- margin-left:0px;
-}
-
-/*************************************************/
-/* Main panel */
-/*************************************************/
-
-.main-panel {
- position: fixed;
- top: 0;
- left: 0;
- margin-left: -330px;
- font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
- font-size: 13px;
- line-height: 16px;
- background: #ffffff;
- transition: all 0.2s ease-in-out;
- width: 250px;
- height: 100%;
- padding: 0;
- z-index: 999;
- box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-}
-
-.main-panel .header {
- padding: 28px 20px 32px 20px;
- font-weight: bold;
- background: #f8f8f8;
- border-bottom: 1px solid #d9d9d9;
-}
-
-.main-panel .header h3 {
- color: rgba(179, 179, 179, 0.49);
- font-size: 24px;
- margin:0;
-}
-
-.main-panel .header h3 i {
- position: absolute;
- right: 20px;
- cursor:pointer;
- transition: all 0.2s ease-in-out;
-}
-
-.main-panel .header h3 i:hover {
- color:#333;
-}
-
-.main-panel.selected {
- margin-left: 80px;
- position: absolute;
- right: 0;
- bottom: 0;
- left: 0;
- overflow: auto;
-}
-
-.main-panel .content {
- padding:20px 0;
-}
-
-/*************************************************/
-/* float-panel */
-/*************************************************/
-
-.float-panel {
- position: fixed;
- top: 0;
- z-index: 99;
- width: 250px;
- height: 100%;
- padding: 0;
- padding: 20px;
- margin-left: -480px;
- font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
- font-size: 13px;
- line-height: 16px;
- background: #ffffff;
- box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
- transition: all 0.2s ease-in-out;
-}
-
-.float-panel.selected{
- margin-left: 0px;
-}
-
-/*************************************************/
-/* sample palette color */
-/*************************************************/
-
-.samples h4 {
- position: initial;
- display: block;
- padding: 5px 10px;
- margin: 0;
- border: 0px solid #6B6B6B;
- font-weight: normal;
- font-size: 12px;
-}
-
-.samples > li {
- padding: 6px 20px;
- cursor: pointer;
-}
-
-.samples > li:hover, .samples > li.hover {
- background: #f8f8f8;
-}
-
-.samples > li ul {
- display:table;
- width:100%;
-}
-
-.samples > li ul > li {
- display: table-cell;
- height: 15px;
- padding: 0;
-}
-
-/*************************************************/
-/* canvas designer panel */
-/*************************************************/
-
-h4.panel-title {
- cursor:pointer;
- background-color: #f8f8f8;
- color: #767676;
-}
-
-.editor-category{
- margin: 5px 10px;
- border: 1px solid #D9D9D9;
-}
-
-.canvasdesigner-panel-container {
- padding: 10px 10px;
-}
-
-.canvasdesigner-panel-property {
- clear: both;
- overflow: hidden;
- margin: 0 0 10px 0;
-}
-
-.canvasdesigner .box-slider {
- padding: 0px 0px 6px 0px;
- overflow: hidden;
- clear: both;
-}
-
-.field-title {
- float: left;
- margin-right: 10px;
- font-size: 12px;
- color: #d9d9d9;
-}
-
-.div-field {
- margin-bottom: 10px;
- overflow: hidden;
- clear: both;
-}
-
-/*************************************************/
-/* font family picker */
-/*************************************************/
-
-.fontFamilyPickerPreview {
- float: left;
- width: 90%;
- padding: 8px;
- margin-top: 4px;
- clear: both;
- font-size: 18px;
- color: #CDCDCD;
- cursor: pointer;
- border: 1px solid #CDCDCD;
- text-align: center;
position: relative;
-}
-
-.fontFamilyPickerPreview span {
- font-size: 32px;
- line-height: 32px;
-}
-
-.fontPickerDelete {
- position: absolute;
- margin: 5px 0 0 -15px;
- cursor: pointer;
- color:#CDCDCD;
- right: 0;
- top: 0;
-}
-
-.fontFamilyPickerPreview:hover {
- border: 1px solid #979797;
- color:#979797;
-}
-
-.fontFamilyPickerPreview:hover .fontPickerDelete {
- color:#979797;
-}
-
-.canvasdesigner-fontfamilypicker {
- margin-bottom:30px;
-}
-
-.canvasdesigner-fontfamilypicker select {
- font-size: 12px;
- padding: 2px;
-}
-
-.canvasdesigner-fontfamilypicker select.font-list {
- width:170px;
-}
-
-.canvasdesigner-fontfamilypicker select.variant-list {
- width:60px;
-}
-
-.canvasdesigner-fontfamilypicker {
- font-size: 42px;
- line-height: 50px;
- margin-bottom:40px;
-}
-
-/*************************************************/
-/* slider */
-/*************************************************/
-
-.canvasdesigner .ui-widget-content {
- background: rgba(0, 0, 0, 0.27) !important;
- border: 0 solid #fff !important;
- border-radius: 1px !important;
-}
-
-.canvasdesigner .ui-slider-horizontal {
- margin: 14px 11px 0 11px;
-}
-
-.ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default,
-.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover,
-.ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {
- border: 1px solid #535353 !important;
- background: #535353 !important;
- background-color:none !important;
- outline:none;
-}
-
-.canvasdesigner .ui-slider .ui-slider-handle:hover,
-.canvasdesigner .ui-slider .ui-slider-handle:focus {
- color: #d9d9d9 !important;
-}
-
-.canvasdesigner .ui-slider .ui-slider-handle span {
- position: absolute !important;
- margin: -15px 0 0 -8px !important;
- color: #535353 !important;
- font-size: 9px !important;
- text-align: -webkit-center !important;
- display: block !important;
- width: 30px !important;
-}
-
-.canvasdesigner .slider-input {
- float: right;
- width: 25px;
- padding: 0;
- margin-top: -9px;
- margin-right: 1px;
- font-size: 12px;
- color: #d9d9d9;
- text-align: right;
- background-color: transparent;
- border: none;
-
-}
-
-@-moz-document url-prefix() {
- .canvasdesigner .slider-input {
- margin-top: -6px;
- }
-}
-
-.canvasdesigner .sp-replacer {
- padding: 0;
- margin: 0;
- display: block;
- border: none;
- height: 26px;
- border-radius: 1px;
- border: 1px solid #CDCDCD;
-}
-
-.canvasdesigner .sp-replacer:hover {
- border: 1px solid #979797;
-}
-
-.canvasdesigner .panel-body {
- border-top: none !important;
-}
-
-.canvasdesigner select {
- font-size: 12px;
-}
-
-.canvasdesigner .sp-dd {
- display: none;
-}
-
-.canvasdesigner .sp-preview {
- width: 100%;
- height: 100%;
- margin-right: 0;
- border: none;
- display: block;
-}
-
-.canvasdesigner .color-picker-preview {
- height: 26px;
- border: 1px solid #CDCDCD;
- border-radius: 1px;
- background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
- cursor: pointer;
-}
-
-.canvasdesigner .float-panel .sp-container.sp-flat {
- background-color: transparent;
- border: none;
- padding: 10px;
- width: 100%;
-}
-
-.canvasdesigner .float-panel .sp-container.sp-flat .sp-picker-container {
- padding: 0;
- margin: 0px;
- margin-bottom: 10px;
- border: none;
- width: 100%;
-}
-
-.canvasdesigner .float-panel .sp-container.sp-flat .sp-palette-container {
- padding: 0;
- height: 32px;
- width: 100%;
- float: left;
- margin: 0;
- border: none;
-}
-
-.canvasdesigner .float-panel .sp-container.sp-flat .sp-button-container {
- display: none;
-}
-
-.colorPickerDelete {
- position: absolute;
- margin: -23px 0 0 0;
- cursor: pointer;
-}
-
-.borderStyleSelect
-{
display: inline-block;
- float: right;
- width: 75px;
- height: 28px;
+
+ > .menu-bar__button {
+ position: relative;
+ }
+
+ .dropdown-menu {
+ display:none;
+
+ position: absolute;
+ right: 0;
+ bottom: 100%;
+ min-width: 200px;
+
+ border-radius: 3px 3px 0 3px;
+ overflow: hidden;
+
+ background-color: @blueExtraDark;
+
+ > button {
+ position: relative;
+ display: list-item;
+ text-align: left;
+ width: 100%;
+
+ &.--active {
+ &::before {
+ content: '';
+ position: absolute;
+ left:0;
+ width: 3px;
+ top: 0;
+ bottom: 0;
+ border-top-right-radius: 3px;
+ border-bottom-right-radius: 3px;
+ background-color: @pinkLight;
+ }
+ }
+ }
+ }
+
+ &.--open {
+ z-index:1;
+ box-shadow: 0 5px 10px 0 rgba(0,0,0,.26);
+ > .menu-bar__button {
+ z-index: @zindexDropdown + 1;
+ }
+ .dropdown-menu {
+ display:block;
+ z-index: @zindexDropdown;
+ box-shadow: 0 5px 10px 0 rgba(0,0,0,.26);
+ }
+ }
+
}
+
+
+
/*************************************************/
/* IFrame size */
/*************************************************/
-.desktop {
+#demo-iframe-wrapper {
+ transition: all 240ms cubic-bezier(0.165, 0.84, 0.44, 1);
+}
+
+.fullsize {
width: 100%;
height: 100%;
margin: 0 auto;
overflow: hidden;
}
+.desktop {
+ width: 1920px;
+ height: 1080px;
+}
+
.laptop {
width: 1366px;
height: 768px;
@@ -762,13 +231,13 @@ h4.panel-title {
height: 360px;
}
-.border {
- margin: 75px auto;
- background-color: #ffffff;
- border-radius: 10px;
+.shadow {
+ margin: 10px auto;
+ background-color: @white;
+ border-radius: 3px;
+ overflow: hidden;
opacity: 1.0;
- box-shadow: 0 0 0 29px #E9E9EB, 0 0 0 30px #D8D7D9;
- transition: all 0.5s ease-in-out;
+ box-shadow: 0 5px 20px 0 rgba(0,0,0,.26);
}
iframe {
@@ -786,251 +255,3 @@ iframe {
.flip:before {
transform: rotate(90deg);
}
-
-/*************************************************/
-/* Image picker */
-/*************************************************/
-
-.imagePickerPreview {
- height: 20px;
- text-align: center;
- background-color: #fff;
- padding: 6px 0 0 0;
- cursor: pointer;
- background-size: cover;
- border-radius:1px;
- border: 1px solid #CDCDCD;
- color: #CDCDCD;
-}
-
-.sp-clear-display {
- background-image: none !important;
-}
-
-.imagePickerPreview:hover {
- border: 1px solid #979797;
-}
-
-.imagePickerPreview:hover i {
- color: #979797;
-}
-
-.imagePickerPreview i {
- font-size:24px;
- color: #CDCDCD;
-}
-
-.canvasdesignerImagePicker {
- padding: 0;
- margin-top: 10px;
- overflow: auto;
- text-align: left;
- list-style: none;
-}
-
-.canvasdesignerImagePicker ul {
- padding: 0;
- margin: 0;
- margin-left: 20px;
- list-style: none;
-}
-
-.canvasdesignerImagePicker li {
- display: inline-block;
- margin-bottom: 10px;
-}
-
-.canvasdesignerImagePicker ul.media-items li {
- margin-right: 20px;
-}
-
-.canvasdesignerImagePicker .media-preview {
- position: relative;
- display: inline-block;
- width: 91px;
- height: 78px;
- cursor: pointer;
- background-position: center center;
- background-size: cover;
- border: 2px solid #F3F2F2;
-}
-
-.canvasdesignerImagePicker .media-preview .folder {
- position: absolute;
- top: 30px;
- left: 0;
- width: 100%;
- font-size: 40px;
- color: gainsboro;
- text-align: center;
-}
-
-.canvasdesignerImagePicker .media-preview .folder-name {
- margin-top: -5px;
- font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
- font-size: 13px;
- line-height: 0;
- color: grey;
-}
-
-.canvasdesignerImagePicker .media-preview:hover,
-.media-preview.selected {
- border: 2px solid #84B8F0;
-}
-
-.canvasdesignerImagePicker .modal-dialog {
- width: 618px;
- font-weight: normal;
-}
-
-.bodyCanvasdesignerImagePicker .breadcrumb {
- margin-top: 4px;
- margin-bottom: 10px;
- font-size: 16px;
- text-align: left;
-}
-
-.bodyCanvasdesignerImagePicker .breadcrumb > li {
- display: inline;
-}
-
-.breadcrumb{
- font-size: 12px;
-}
-
-.bodyCanvasdesignerImagePicker .breadcrumb > li a {
- cursor: pointer;
-}
-
-.bodyCanvasdesignerImagePicker .breadcrumb input {
- padding: 0;
- margin: -4px -4px;
-}
-
-.bodyCanvasdesignerImagePicker .fileinput-button {
- position: absolute;
- top: 10px;
- right: 10px;
- font-size: 19px;
-}
-
-.bodyCanvasdesignerImagePicker input.input-media {
- position: absolute;
- top: 0;
- right: 0;
- margin: 0;
- font-size: 23px;
- cursor: pointer;
- opacity: 0;
- transform: translate(-300px, 0) scale(4);
- direction: ltr;
-}
-
-.bodyCanvasdesignerImagePicker .breadcrumb a.disabled,
-.bodyCanvasdesignerImagePicker .breadcrumb a.disabled:hover {
- color: grey;
- text-decoration: none;
- cursor: default;
-}
-
-.canvasdesignerImagePicker h3 {
- font-size: 18px;
- color: #555555;
-}
-
-/*************************************************/
-/* Border editor */
-/*************************************************/
-
-.box-preview {
- display:inline-block;
-}
-
-.box-preview li {
- height: 30px;
- width: 30px;
- border-radius: 1px;
- border: none;
- display:inline-block;
- background-color:#535353;
- cursor:pointer;
- margin-right: 6px;
- position:relative;
-}
-
-.box-preview li:last-child{
- margin-right: 0px;
-}
-
-.box-preview li.selected {
- border-color:#53a93f !important;
-}
-
-.box-preview li.border-all {
- border: 6px solid #b3b3b3;
- height: 18px;
- width: 18px;
- margin-left:0px
-}
-
-.box-preview li.border-left {
- border-left: 6px solid #b3b3b3;
- width: 24px;
-}
-
-.box-preview li.border-right {
- border-right: 6px solid #b3b3b3;
- width: 24px;
-}
-
-.box-preview li.border-top {
- border-top: 6px solid #b3b3b3;
- height: 24px;
-}
-
-.box-preview li.border-bottom {
- border-bottom: 6px solid #b3b3b3;
- height: 24px;
-}
-
-.bordereditor .color-picker-preview {
- display: inline-block;
- width: 120px;
- float: left;
-}
-
-/*************************************************/
-/* Radius editor */
-/*************************************************/
-
-.radius-top-left, .radius-top-right, .radius-bottom-left, .radius-bottom-right {
- display: block;
- position: absolute;
- background-color: #b3b3b3;
- width: 7px;
- height: 7px;
-}
-
-.box-preview li.selected span {
- background-color:#53a93f;
-}
-
-.radius-top-left{
- top:0;
- left:0;
-}
-
-.radius-top-right{
- top:0;
- right:0;
-}
-
-.radius-bottom-left{
- bottom:0;
- left:0;
-}
-
-.radius-bottom-right{
- bottom:0;
- right:0
-}
diff --git a/src/Umbraco.Web.UI.Client/src/less/colors.less b/src/Umbraco.Web.UI.Client/src/less/colors.less
new file mode 100644
index 0000000000..4cb70cdf5e
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/less/colors.less
@@ -0,0 +1,81 @@
+.red{color: @red;}
+.blue{color: @blue;}
+.black{color: @black;}
+.turquoise{color: @turquoise;}
+.turquoise-d1{color: @turquoise-d1;}
+
+.text-warning {
+ color: @orange;
+}
+.text-error {
+ color: @red;
+}
+.text-success {
+ color: @green;
+}
+
+
+//icon colors for tree icons
+.color-red, .color-red i{color: @red-d1 !important;}
+.color-blue, .color-blue i{color: @turquoise-d1 !important;}
+.color-orange, .color-orange i{color: @orange !important;}
+.color-green, .color-green i{color: @green-d1 !important;}
+.color-yellow, .color-yellow i{color: @yellowIcon !important;}
+
+/* Colors based on https://zavoloklom.github.io/material-design-color-palette/colors.html */
+.btn-color-black {background-color: @black;}
+.color-black i { color: @black;}
+
+.btn-color-blue-grey {background-color: @blueGrey;}
+.color-blue-grey, .color-blue-grey i { color: @blueGrey !important;}
+
+.btn-color-grey{background-color: @grayIcon;}
+.color-grey, .color-grey i { color: @grayIcon !important; }
+
+.btn-color-brown{background-color: @brownIcon;}
+.color-brown, .color-brown i { color: @brownIcon !important; }
+
+.btn-color-blue{background-color: @blueIcon;}
+.color-blue, .color-blue i { color: @blueIcon !important; }
+
+.btn-color-light-blue{background-color: @lightBlueIcon;}
+.color-light-blue, .color-light-blue i {color: @lightBlueIcon !important;}
+
+.btn-color-cyan{background-color: @cyanIcon;}
+.color-cyan, .color-cyan i { color: @cyanIcon !important; }
+
+.btn-color-green{background-color: @greenIcon;}
+.color-green, .color-green i { color: @greenIcon !important; }
+
+.btn-color-light-green{background-color: @lightGreenIcon;}
+.color-light-green, .color-light-green i {color: @lightGreenIcon !important; }
+
+.btn-color-lime{background-color: @limeIcon;}
+.color-lime, .color-lime i { color: @limeIcon !important; }
+
+.btn-color-yellow{background-color: @yellowIcon;}
+.color-yellow, .color-yellow i { color: @yellowIcon !important; }
+
+.btn-color-amber{background-color: @amberIcon;}
+.color-amber, .color-amber i { color: @amberIcon !important; }
+
+.btn-color-orange{background-color: @orangeIcon;}
+.color-orange, .color-orange i { color: @orangeIcon !important; }
+
+.btn-color-deep-orange{background-color: @deepOrangeIcon;}
+.color-deep-orange, .color-deep-orange i { color: @deepOrangeIcon !important; }
+
+.btn-color-red{background-color: @redIcon;}
+.color-red, .color-red i { color: @redIcon !important; }
+
+.btn-color-pink{background-color: @pinkIcon;}
+.color-pink, .color-pink i { color: @pinkIcon !important; }
+
+.btn-color-purple{background-color: @purpleIcon;}
+.color-purple, .color-purple i { color: @purpleIcon !important; }
+
+.btn-color-deep-purple{background-color: @deepPurpleIcon;}
+.color-deep-purple, .color-deep-purple i { color: @deepPurpleIcon !important; }
+
+.btn-color-indigo{background-color: @indigoIcon;}
+.color-indigo, .color-indigo i { color: @indigoIcon !important; }
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/buttons/umb-toggle.less b/src/Umbraco.Web.UI.Client/src/less/components/buttons/umb-toggle.less
index a621370d02..456601a7bd 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/buttons/umb-toggle.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/buttons/umb-toggle.less
@@ -57,7 +57,7 @@
.umb-toggle.umb-toggle--checked & {
transform: translateX(20px);
- background-color: white;
+ background-color: @white;
}
}
@@ -75,7 +75,7 @@
.umb-toggle__icon--left {
left: 5px;
- color: white;
+ color:@white;
transition: opacity 120ms;
opacity: 0;
// .umb-toggle:hover & {
@@ -85,7 +85,7 @@
opacity: 1;
}
.umb-toggle.umb-toggle--checked:hover & {
- color: white;
+ color:@white;
}
}
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/card.less b/src/Umbraco.Web.UI.Client/src/less/components/card.less
index 8324698685..ed80359833 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/card.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/card.less
@@ -5,7 +5,7 @@
.umb-card{
position: relative;
padding: 5px 10px 5px 10px;
- background: white;
+ background: @white;
width: 100%;
.title{padding: 12px; color: @gray-3; border-bottom: 1px solid @gray-8; font-weight: 400; font-size: 16px; text-transform: none; margin: 0 -10px 10px -10px;}
@@ -86,7 +86,7 @@
margin: 0 auto;
list-style: none;
width: 100%;
-
+
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
@@ -119,7 +119,7 @@
padding-top: 100%;
border-radius: 3px;
transition: background-color 120ms;
-
+
> span {
position: absolute;
top: 10px;
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 44cd86a189..1217441f4e 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
@@ -17,8 +17,8 @@
}
}
.umb-editor-sub-header--white {
- background-color: white;
- border-color: white;
+ background-color: @white;
+ border-color: @white;
}
.umb-editor-sub-header.--state-selection {
@@ -33,11 +33,11 @@
transition: box-shadow 240ms;
position:sticky;
z-index: 30;
-
+
&.umb-sticky-bar--active {
box-shadow: 0 6px 3px -3px rgba(0,0,0,.16);
}
-
+
.umb-dashboard__content & {
top:-20px; // umb-dashboard__content has 20px padding - offset here prevents sticky position from firing when page loads
}
@@ -45,8 +45,8 @@
.umb-sticky-sentinel {
pointer-events: none;
- z-index: 5050;
-
+ z-index: 5050;
+
&.-top {
height:1px;
transform:translateY(-10px);
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/prevalues/multivalues.less b/src/Umbraco.Web.UI.Client/src/less/components/prevalues/multivalues.less
index 9947c793c2..7036d60a63 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/prevalues/multivalues.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/prevalues/multivalues.less
@@ -44,7 +44,7 @@
display: flex;
padding: 6px;
margin: 10px 0px !important;
- background: #F3F3F5;
+ background: @gray-10;
cursor: move;
}
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 8945d15ec6..df01477880 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
@@ -3,11 +3,11 @@
min-width: 100%;
width: auto;
margin-top:1px;
-
+
.umb-tree-item__label {
user-select: none;
}
-
+
&:hover .umb-tree-item__arrow {
visibility: visible;
cursor: pointer
@@ -36,7 +36,7 @@
overflow: hidden;
margin-right: 6px;
}
-
+
// Loading Animation
// ------------------------
.umb-tree-item__loader {
@@ -46,7 +46,7 @@
}
.umb-tree-item__label {
- padding: 7px 0 5px;
+ padding: 7px 0 5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@@ -71,7 +71,7 @@
left: 0;
right: 0;
bottom: 0;
- border: 2px solid fade(white, 80%);
+ border: 2px solid fade(@white, 80%);
}
&:hover {
@@ -86,12 +86,12 @@
.umb-tree-item.current > .umb-tree-item__inner {
background: @ui-active;
color:@ui-active-type;
-
- // override small icon color. TODO => check usage
+
+ // override small icon color. TODO => check usage
&:before {
color: @blue;
}
-
+
.umb-options {
&:hover i {
@@ -113,5 +113,5 @@
.umb-tree-item.current-not-active > .umb-tree-item__inner {
background: @ui-active-blur;
- color:@ui-active-type;
+ color:@ui-active-type;
}
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-avatar.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-avatar.less
index 21f4a7bda8..c6b9dc7261 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-avatar.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-avatar.less
@@ -103,7 +103,7 @@ a.umb-avatar-btn:hover {
text-decoration: none;
}
a.umb-avatar-btn .umb-avatar {
- border: 2px dashed #A2A1A6;
+ border: 2px dashed @gray-6;
}
a.umb-avatar-btn .umb-avatar span {
font-size: 50px;
@@ -114,4 +114,4 @@ a.umb-avatar-btn .umb-avatar span {
font-size: 50px;
}
-/*border-radius: 50%; width: 100px; height: 100px; font-size: 50px; text-align: center; display: flex; align-items: center; justify-content: center; background-color: #F3F3F5; border: 2px dashed #A2A1A6; color: #A2A1A6;*/
+/*border-radius: 50%; width: 100px; height: 100px; font-size: 50px; text-align: center; display: flex; align-items: center; justify-content: center; background-color: @gray-10; border: 2px dashed @gray-6; color: @gray-6;*/
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-form-check.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-form-check.less
index 7f19c4933c..e0dee5f266 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-form-check.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-form-check.less
@@ -80,7 +80,7 @@
outline: 2px solid @inputBorderTabFocus;
}
.tabbing-active &.umb-form-check--checkbox &__input:checked:focus ~ .umb-form-check__state .umb-form-check__check {
- border-color: white;
+ border-color: @white;
}
// add spacing between when flexed/inline, equal to the width of the input
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-grid.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-grid.less
index 277c2bcbe8..479074fee9 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-grid.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-grid.less
@@ -437,7 +437,7 @@
.umb-grid .umb-row.-active-child {
background-color: @gray-10;
-
+
.umb-row-title-bar {
cursor: inherit;
}
@@ -445,7 +445,7 @@
.umb-row-title {
color: @gray-3;
}
-
+
}
@@ -582,10 +582,10 @@
.umb-grid .iconBox.selected {
-webkit-appearance: none;
- background-image: linear-gradient(to bottom,#e6e6e6,#bfbfbf);
+ background-image: linear-gradient(to bottom,@gray-9,@gray-7);
background-repeat: repeat-x;
zoom: 1;
- border-color: #bfbfbf #bfbfbf #999;
+ border-color: @gray-7 @gray-7 @gray-6;
border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
border-radius: 3px;
@@ -638,9 +638,9 @@
.umb-grid .mce-toolbar {
border-bottom: 1px solid @gray-7;
- background-color: white;
+ background-color: @white;
display: none;
-
+
left: 0;
right: 0;
}
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-group-builder.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-group-builder.less
index c51fd37fe4..f9d8772d45 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-group-builder.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-group-builder.less
@@ -493,11 +493,11 @@ input.umb-group-builder__group-sort-value {
font-weight: bold;
font-size: 14px;
color: @ui-action-type;
-
- &:hover{
+
+ &:hover {
text-decoration: none;
- color:@ui-action-type-hover;
- border-color:@ui-action-border-hover;
+ color: @ui-action-type-hover;
+ border-color: @ui-action-border-hover;
}
}
@@ -554,7 +554,13 @@ input.umb-group-builder__group-sort-value {
overflow: hidden;
}
- .editor-validation-pattern{
+ .editor-validation-message {
+ min-width: 100%;
+ min-height: 25px;
+ margin-top: 4px;
+ }
+
+ .editor-validation-pattern {
border: 1px solid @gray-7;
margin: 10px 0 0;
padding: 6px;
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-iconpicker.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-iconpicker.less
index 34070256ce..e8a62f739d 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-iconpicker.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-iconpicker.less
@@ -51,7 +51,7 @@
// Color swatch
.button {
border: none;
- color: white;
+ color: @white;
padding: 5px;
text-align: center;
text-decoration: none;
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-insert-code-box.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-insert-code-box.less
index a87e7084fb..f3b53f4def 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-insert-code-box.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-insert-code-box.less
@@ -11,7 +11,7 @@
cursor: pointer;
}
-.umb-insert-code-box:hover,
+.umb-insert-code-box:hover,
.umb-insert-code-box.-selected {
background-color: @ui-option-hover;
color: @ui-action-type-hover;
@@ -32,7 +32,7 @@
.umb-insert-code-box__check {
width: 18px;
height: 18px;
- background: @gray-10;x
+ background: @gray-10;
border-radius: 50%;
display: flex;
align-items: center;
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 cdc6cfcb63..9ebd6d6e5d 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
@@ -23,10 +23,10 @@
.umb-layout-selector__dropdown {
position: absolute;
padding: 5px;
- background: #333;
+ background: @grayDark;
z-index: 999;
display: flex;
- background: #fff;
+ background: @white;
flex-wrap: wrap;
flex-direction: column;
transform: translate(-50%,0);
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-list-view-settings.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-list-view-settings.less
index f6dfed63c1..ba46c68a57 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-list-view-settings.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-list-view-settings.less
@@ -52,7 +52,7 @@
tbody tr {
background: @gray-10;
- border-bottom: 1px solid #fff;
+ border-bottom: 1px solid @white;
}
th {
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-logviewer.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-logviewer.less
index 76223589e4..8beff55b7c 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-logviewer.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-logviewer.less
@@ -83,7 +83,7 @@
top: 0;
line-height: 32px;
right: 140px;
- color: #fdb45c;
+ color: @yellow-d1;
cursor: pointer;
}
@@ -92,7 +92,7 @@
top: 0;
line-height: 32px;
right: 120px;
- color: #bbbabf;
+ color: @gray-7;
cursor: pointer;
}
@@ -133,7 +133,7 @@
}
.exception {
- border-left: 4px solid #D42054;
+ border-left: 4px solid @red;
padding: 0 10px 10px 10px;
box-shadow: rgba(0,0,0,0.07) 2px 2px 10px;
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 50244c2079..05d91de9f7 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
@@ -54,7 +54,7 @@
color: @ui-selected-type;
}
}
-.umb-media-grid__item.-selected,
+.umb-media-grid__item.-selected,
.umb-media-grid__item.-selectable:hover {
&::before {
content: "";
@@ -130,10 +130,10 @@
overflow: hidden;
color: @black;
white-space: nowrap;
- border-top:1px solid fade(black, 4%);
+ border-top:1px solid fade(@black, 4%);
background: fade(@white, 92%);
transition: opacity 150ms;
-
+
&:hover {
text-decoration: underline;
}
@@ -181,7 +181,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-nested-content.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-nested-content.less
index 455a147395..699496f5d3 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
@@ -14,6 +14,17 @@
pointer-events: none;
}
+.umb-nested-content--mandatory {
+ /*
+ yeah so this is a pain, but we must be super specific in targeting the mandatory property labels,
+ otherwise all properties within a reqired, nested, nested content property will all appear mandatory
+ */
+ > ng-form > .control-group > .umb-el-wrap > .control-header label:after {
+ content: '*';
+ color: @red;
+ }
+}
+
.umb-nested-content-overlay {
position: absolute;
top: 0;
@@ -71,7 +82,7 @@
padding: 15px 5px;
color:@ui-option-type;
border-radius: 3px 3px 0 0;
-
+
&:hover {
color:@ui-option-type-hover;
}
@@ -93,7 +104,7 @@
padding-left: 30px;
}
}
-
+
}
.umb-nested-content__icons {
@@ -134,6 +145,8 @@
.umb-nested-content__icon {
+ background: transparent;
+ border: 0 none;
display: inline-block;
padding: 4px;
margin: 2px;
@@ -213,19 +226,19 @@
display: none !important;
}
-.umb-nested-content__doctypepicker table input,
+.umb-nested-content__doctypepicker table input,
.umb-nested-content__doctypepicker table select {
width: 100%;
padding-right: 0;
}
-.umb-nested-content__doctypepicker table td.icon-navigation,
+.umb-nested-content__doctypepicker table td.icon-navigation,
.umb-nested-content__doctypepicker i.umb-nested-content__help-icon {
vertical-align: middle;
color: @gray-7;
}
-.umb-nested-content__doctypepicker table td.icon-navigation:hover,
+.umb-nested-content__doctypepicker table td.icon-navigation:hover,
.umb-nested-content__doctypepicker i.umb-nested-content__help-icon:hover {
color: @gray-2;
}
@@ -235,44 +248,28 @@
}
.umb-nested-content__placeholder {
- height: 22px;
- padding: 4px 6px;
- border: 1px dashed #d8d7d9;
+ padding: 4px 6px;
+ border: 1px dashed @gray-8;
background: 0 0;
cursor: pointer;
- color: #1b264f;
+ color: @blueExtraDark;
-webkit-animation: fadeIn .5s;
animation: fadeIn .5s;
text-align: center;
&--selected {
- border: 1px solid #d8d7d9;
+ border: none;
text-align: left;
+ padding: 0;
}
}
-.umb-nested-content__placeholder-name{
- font-size: 15px;
-}
-
.umb-nested-content__placeholder:hover {
- color: #2152a3;
- border-color: #2152a3;
+ color: @blueMid;
+ border-color: @blueMid;
text-decoration: none;
}
-.umb-nested-content__placeholder-icon-holder {
- width: 20px;
- text-align: center;
- display: inline-block;
-}
-
-.umb-nested-content__placeholder-icon {
- font-size: 18px;
- vertical-align: middle;
-}
-
-
.form-horizontal .umb-nested-content--narrow .controls-row {
margin-left: 40% !important;
}
@@ -291,7 +288,7 @@
// the attribute selector ensures the change only applies to the linkpicker overlay
.form-horizontal .umb-nested-content--narrow [ng-controller*="Umbraco.Overlays.LinkPickerController"] .controls-row {
margin-left:0!important;
-
+
.umb-textarea, .umb-textstring {
width:100%;
}
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-property-actions.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-property-actions.less
index 3ce284870e..3f0b981ac6 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-property-actions.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-property-actions.less
@@ -39,7 +39,7 @@
top: -15px;
border-radius: 3px 3px 0 0;
-
+
border-top-left-radius: 3px;
border-top-right-radius: 3px;
@@ -49,8 +49,8 @@
.box-shadow(0 5px 20px rgba(0,0,0,.3));
- background-color: white;
-
+ background-color: @white;
+
}
.umb-property .umb-property-actions {
@@ -71,12 +71,12 @@
}
.umb-property-actions__menu {
-
+
position: absolute;
z-index: 1000;
display: block;
-
+
float: left;
min-width: 160px;
list-style: none;
@@ -85,11 +85,11 @@
border-top-left-radius: 0;
margin-top:1px;
-
+
}
.umb-contextmenu-item > button {
-
+
z-index:2;// need to stay on top of menu-toggle-open shadow.
}
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-range-slider.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-range-slider.less
index 1461d0f223..6ae92ffa4e 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-range-slider.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-range-slider.less
@@ -1,7 +1,7 @@
.umb-range-slider.noUi-target {
- background: linear-gradient(to bottom, #f5f5f5 0%, #f9f9f9 100%);
+ background: linear-gradient(to bottom, @grayLighter 0%, @grayLighter 100%);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
border-radius: 20px;
height: 10px;
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 5e766b7578..94c0318fca 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
@@ -161,6 +161,7 @@ input.umb-table__input {
line-height: 20px;
color: @ui-option-type;
vertical-align: bottom;
+ text-decoration: none;
}
.umb-table-body__checkicon,
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/users/umb-user-details.less b/src/Umbraco.Web.UI.Client/src/less/components/users/umb-user-details.less
index 9ddad03b48..a612af65ef 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/users/umb-user-details.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/users/umb-user-details.less
@@ -1,7 +1,7 @@
.umb-user-details-avatar {
margin-bottom: 20px;
padding-bottom: 20px;
- border-bottom: 1px solid #d8d7d9;
+ border-bottom: 1px solid @gray-8;
}
div.umb-user-details-actions > div {
@@ -63,6 +63,10 @@ a.umb-user-details-details__back-link {
.umb-user-details-details__sidebar {
flex: 0 0 @sidebarwidth;
+
+ .umb-button{
+ margin-left:0px;
+ }
}
@media (max-width: 768px) {
@@ -77,7 +81,7 @@ a.umb-user-details-details__back-link {
margin-bottom: 30px;
margin-right: 0;
}
-
+
.umb-user-details-details__sidebar {
flex: 1 1 auto;
width: 100%;
@@ -101,6 +105,7 @@ a.umb-user-details-details__back-link {
.umb-user-details-details__information-item {
margin-bottom: 10px;
font-size: 13px;
+ margin-top:10px;
}
.umb-user-details-details__information-item-label {
diff --git a/src/Umbraco.Web.UI.Client/src/less/dashboards/getstarted.less b/src/Umbraco.Web.UI.Client/src/less/dashboards/getstarted.less
index 807d0e863f..d64ffef098 100644
--- a/src/Umbraco.Web.UI.Client/src/less/dashboards/getstarted.less
+++ b/src/Umbraco.Web.UI.Client/src/less/dashboards/getstarted.less
@@ -22,8 +22,8 @@
text-align: center;
display: flex;
align-items: center;
- border: 1px solid #d8d7d9;
- background-color: #fff;
+ border: 1px solid @gray-8;
+ background-color: @white;
margin: 0 0 0.5em;
@media (min-width: 500px) {
diff --git a/src/Umbraco.Web.UI.Client/src/less/dashboards/nucache.less b/src/Umbraco.Web.UI.Client/src/less/dashboards/nucache.less
index 4ebe1d47b0..91922300fb 100644
--- a/src/Umbraco.Web.UI.Client/src/less/dashboards/nucache.less
+++ b/src/Umbraco.Web.UI.Client/src/less/dashboards/nucache.less
@@ -4,7 +4,7 @@
}
.top-border {
- border-top: 2px solid #f3f3f5;
+ border-top: 2px solid @gray-10;
}
.no-left-padding {
diff --git a/src/Umbraco.Web.UI.Client/src/less/dashboards/umbraco-forms.less b/src/Umbraco.Web.UI.Client/src/less/dashboards/umbraco-forms.less
index b51bfeffa9..21ec047d41 100644
--- a/src/Umbraco.Web.UI.Client/src/less/dashboards/umbraco-forms.less
+++ b/src/Umbraco.Web.UI.Client/src/less/dashboards/umbraco-forms.less
@@ -106,7 +106,7 @@
.step-text {
font-size: 16px;
line-height: 1.5;
- color: #4c4c4c;
+ color: @gray;
margin-bottom: 20px;
}
diff --git a/src/Umbraco.Web.UI.Client/src/less/footer.less b/src/Umbraco.Web.UI.Client/src/less/footer.less
deleted file mode 100644
index 93fdb6ab5e..0000000000
--- a/src/Umbraco.Web.UI.Client/src/less/footer.less
+++ /dev/null
@@ -1,2 +0,0 @@
-// Footer
-// -------------------------
diff --git a/src/Umbraco.Web.UI.Client/src/less/forms.less b/src/Umbraco.Web.UI.Client/src/less/forms.less
index cfbb8b78ab..72abb3ba00 100644
--- a/src/Umbraco.Web.UI.Client/src/less/forms.less
+++ b/src/Umbraco.Web.UI.Client/src/less/forms.less
@@ -528,7 +528,8 @@ input[type="checkbox"][readonly] {
.help-inline {
display: inline-block;
vertical-align: middle;
- padding-left: 5px;
+ padding-top: 4px;
+ padding-left: 2px;
}
div.help {
diff --git a/src/Umbraco.Web.UI.Client/src/less/gridview.less b/src/Umbraco.Web.UI.Client/src/less/gridview.less
index bb684cd69b..238feead90 100644
--- a/src/Umbraco.Web.UI.Client/src/less/gridview.less
+++ b/src/Umbraco.Web.UI.Client/src/less/gridview.less
@@ -365,12 +365,12 @@
.usky-grid .iconBox.selected {
-webkit-appearance: none;
- background-image: -webkit-gradient(linear,0 0,0 100%,from(#e6e6e6),to(#bfbfbf));
- background-image: -webkit-linear-gradient(top,#e6e6e6,#bfbfbf);
- background-image: linear-gradient(to bottom,#e6e6e6,#bfbfbf);
+ background-image: -webkit-gradient(linear,0 0,0 100%,from(@gray-9),to(@gray-7));
+ background-image: -webkit-linear-gradient(top,@gray-9,@gray-7);
+ background-image: linear-gradient(to bottom,@gray-9,@gray-7);
background-repeat: repeat-x;
zoom: 1;
- border-color: #bfbfbf #bfbfbf #999;
+ border-color: @gray-7 @gray-7 @gray-6;
border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
border-radius: 3px;
@@ -379,7 +379,7 @@
.usky-grid .iconBox i {
font-size:16px !important;
- color: #5F5F5F;
+ color: @gray-4;
display:block;
}
diff --git a/src/Umbraco.Web.UI.Client/src/less/installer.less b/src/Umbraco.Web.UI.Client/src/less/installer.less
index 865f015ffa..e964ed3c6f 100644
--- a/src/Umbraco.Web.UI.Client/src/less/installer.less
+++ b/src/Umbraco.Web.UI.Client/src/less/installer.less
@@ -1,6 +1,7 @@
// Core variables and mixins
@import "fonts.less"; // Loading fonts
@import "variables.less"; // Modify this for custom colors, font-sizes, etc
+@import "colors.less";
@import "mixins.less";
@import "buttons.less";
@import "forms.less";
@@ -133,8 +134,8 @@ legend {
}
input.ng-dirty.ng-invalid {
- border-color: #b94a48;
- color: #b94a48;
+ border-color: @pink;
+ color: @pink;
}
.disabled {
diff --git a/src/Umbraco.Web.UI.Client/src/less/legacydialog.less b/src/Umbraco.Web.UI.Client/src/less/legacydialog.less
index ca920d22c2..f1835a682c 100644
--- a/src/Umbraco.Web.UI.Client/src/less/legacydialog.less
+++ b/src/Umbraco.Web.UI.Client/src/less/legacydialog.less
@@ -16,8 +16,8 @@
margin-top: 10px;
height: 100%;
overflow: auto;
- border-top: 1px solid #ccc;
- border-top: 1px solid #ccc;
+ border-top: 1px solid @gray-8;
+ border-top: 1px solid @gray-8;
padding: 5px;
}
@@ -30,11 +30,11 @@
.umb-dialog .diff table th {
padding: 5px;
width: 25%;
- border-bottom: 1px solid #ccc;
+ border-bottom: 1px solid @gray-8;
}
.umb-dialog .diff table td {
- border-bottom: 1px solid #ccc;
+ border-bottom: 1px solid @gray-8;
padding: 3px;
}
diff --git a/src/Umbraco.Web.UI.Client/src/less/mixins.less b/src/Umbraco.Web.UI.Client/src/less/mixins.less
index e49755338b..21b9c5c550 100644
--- a/src/Umbraco.Web.UI.Client/src/less/mixins.less
+++ b/src/Umbraco.Web.UI.Client/src/less/mixins.less
@@ -332,7 +332,7 @@
}
// Gradient Bar Colors for buttons and alerts
-.gradientBar(@primaryColor, @secondaryColor, @textColor: #fff) {
+.gradientBar(@primaryColor, @secondaryColor, @textColor: @white) {
color: @textColor;
#gradient > .vertical(@primaryColor, @secondaryColor);
border-color: @secondaryColor @secondaryColor darken(@secondaryColor, 15%);
@@ -341,7 +341,7 @@
// Gradients
#gradient {
- .horizontal(@startColor: #555, @endColor: #333) {
+ .horizontal(@startColor: @gray, @endColor: @grayDark) {
background-color: @endColor;
background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+
background-image: -webkit-gradient(linear, 0 0, 100% 0, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
@@ -350,7 +350,7 @@
background-image: linear-gradient(to right, @startColor, @endColor); // Standard, IE10
background-repeat: repeat-x;
}
- .vertical(@startColor: #555, @endColor: #333) {
+ .vertical(@startColor: @gray, @endColor: @grayDark) {
background-color: mix(@startColor, @endColor, 60%);
background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
@@ -359,7 +359,7 @@
background-image: linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10
background-repeat: repeat-x;
}
- .directional(@startColor: #555, @endColor: #333, @deg: 45deg) {
+ .directional(@startColor: @gray, @endColor: @grayDark, @deg: 45deg) {
background-color: @endColor;
background-repeat: repeat-x;
background-image: -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+
@@ -367,7 +367,7 @@
background-image: -o-linear-gradient(@deg, @startColor, @endColor); // Opera 11.10
background-image: linear-gradient(@deg, @startColor, @endColor); // Standard, IE10
}
- .horizontal-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
+ .horizontal-three-colors(@startColor: @lightBlueIcon, @midColor: @purple-l1, @colorStop: 50%, @endColor: @pink) {
background-color: mix(@midColor, @endColor, 80%);
background-image: -webkit-gradient(left, linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
background-image: -webkit-linear-gradient(left, @startColor, @midColor @colorStop, @endColor);
@@ -377,7 +377,7 @@
background-repeat: no-repeat;
}
- .vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
+ .vertical-three-colors(@startColor: @lightBlueIcon, @midColor: @deepPurpleIcon, @colorStop: 50%, @endColor: @pink) {
background-color: mix(@midColor, @endColor, 80%);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
background-image: -webkit-linear-gradient(@startColor, @midColor @colorStop, @endColor);
@@ -386,7 +386,7 @@
background-image: linear-gradient(@startColor, @midColor @colorStop, @endColor);
background-repeat: no-repeat;
}
- .radial(@innerColor: #555, @outerColor: #333) {
+ .radial(@innerColor: @gray, @outerColor: @grayDark) {
background-color: @outerColor;
background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(@innerColor), to(@outerColor));
background-image: -webkit-radial-gradient(circle, @innerColor, @outerColor);
@@ -394,7 +394,7 @@
background-image: -o-radial-gradient(circle, @innerColor, @outerColor);
background-repeat: no-repeat;
}
- .striped(@color: #555, @angle: 45deg) {
+ .striped(@color: @gray, @angle: 45deg) {
background-color: @color;
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255,255,255,.15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255,255,255,.15)), color-stop(.75, rgba(255,255,255,.15)), color-stop(.75, transparent), to(transparent));
background-image: -webkit-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
@@ -404,7 +404,7 @@
}
}
-.checkeredBackground(@backgroundColor: #eee, @fillColor: #000, @fillOpacity: 0.25) {
+.checkeredBackground(@backgroundColor: @gray-9, @fillColor: @black, @fillOpacity: 0.25) {
background-image: url('data:image/svg+xml;charset=utf-8,\