diff --git a/src/Umbraco.Web.UI.Client/src/less/belle.less b/src/Umbraco.Web.UI.Client/src/less/belle.less
index a65b94444e..78e9cabcfc 100644
--- a/src/Umbraco.Web.UI.Client/src/less/belle.less
+++ b/src/Umbraco.Web.UI.Client/src/less/belle.less
@@ -25,7 +25,7 @@
@import "../../lib/bootstrap/less/close.less";
// Components: Buttons & Alerts
-@import "../../lib/bootstrap/less/button-groups.less";
+@import "button-groups.less";
@import "alerts.less"; // Note: alerts share common CSS with buttons and thus have styles in buttons.less
// Components: Nav
diff --git a/src/Umbraco.Web.UI.Client/src/less/button-groups.less b/src/Umbraco.Web.UI.Client/src/less/button-groups.less
new file mode 100644
index 0000000000..070e353c14
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/less/button-groups.less
@@ -0,0 +1,229 @@
+//
+// Button groups
+// --------------------------------------------------
+
+
+// Make the div behave like a button
+.btn-group {
+ position: relative;
+ display: inline-block;
+ .ie7-inline-block();
+ font-size: 0; // remove as part 1 of font-size inline-block hack
+ vertical-align: middle; // match .btn alignment given font-size hack above
+ white-space: nowrap; // prevent buttons from wrapping when in tight spaces (e.g., the table on the tests page)
+ .ie7-restore-left-whitespace();
+}
+
+// Space out series of button groups
+.btn-group + .btn-group {
+ margin-left: 5px;
+}
+
+// Optional: Group multiple button groups together for a toolbar
+.btn-toolbar {
+ font-size: 0; // Hack to remove whitespace that results from using inline-block
+ margin-top: @baseLineHeight / 2;
+ margin-bottom: @baseLineHeight / 2;
+ > .btn + .btn,
+ > .btn-group + .btn,
+ > .btn + .btn-group {
+ margin-left: 5px;
+ }
+}
+
+// Float them, remove border radius, then re-add to first and last elements
+.btn-group > .btn {
+ position: relative;
+ .border-radius(0);
+}
+.btn-group > .btn + .btn {
+ margin-left: -1px;
+}
+.btn-group > .btn,
+.btn-group > .dropdown-menu,
+.btn-group > .popover {
+ font-size: @baseFontSize; // redeclare as part 2 of font-size inline-block hack
+}
+
+// Reset fonts for other sizes
+.btn-group > .btn-mini {
+ font-size: @fontSizeMini;
+}
+.btn-group > .btn-small {
+ font-size: @fontSizeSmall;
+}
+.btn-group > .btn-large {
+ font-size: @fontSizeLarge;
+}
+
+// Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match
+.btn-group > .btn:first-child {
+ margin-left: 0;
+ .border-top-left-radius(@baseBorderRadius);
+ .border-bottom-left-radius(@baseBorderRadius);
+}
+// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it
+.btn-group > .btn:last-child,
+.btn-group > .dropdown-toggle {
+ .border-top-right-radius(@baseBorderRadius);
+ .border-bottom-right-radius(@baseBorderRadius);
+}
+// Reset corners for large buttons
+.btn-group > .btn.large:first-child {
+ margin-left: 0;
+ .border-top-left-radius(@borderRadiusLarge);
+ .border-bottom-left-radius(@borderRadiusLarge);
+}
+.btn-group > .btn.large:last-child,
+.btn-group > .large.dropdown-toggle {
+ .border-top-right-radius(@borderRadiusLarge);
+ .border-bottom-right-radius(@borderRadiusLarge);
+}
+
+// On hover/focus/active, bring the proper btn to front
+.btn-group > .btn:hover,
+.btn-group > .btn:focus,
+.btn-group > .btn:active,
+.btn-group > .btn.active {
+ z-index: 2;
+}
+
+// On active and open, don't show outline
+.btn-group .dropdown-toggle:active,
+.btn-group.open .dropdown-toggle {
+ outline: 0;
+}
+
+
+
+// Split button dropdowns
+// ----------------------
+
+// Give the line between buttons some depth
+.btn-group > .btn + .dropdown-toggle {
+ padding-left: 8px;
+ padding-right: 8px;
+ .box-shadow(~"inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)");
+ *padding-top: 5px;
+ *padding-bottom: 5px;
+}
+.btn-group > .btn-mini + .dropdown-toggle {
+ padding-left: 5px;
+ padding-right: 5px;
+ *padding-top: 2px;
+ *padding-bottom: 2px;
+}
+.btn-group > .btn-small + .dropdown-toggle {
+ *padding-top: 5px;
+ *padding-bottom: 4px;
+}
+.btn-group > .btn-large + .dropdown-toggle {
+ padding-left: 12px;
+ padding-right: 12px;
+ *padding-top: 7px;
+ *padding-bottom: 7px;
+}
+
+.btn-group.open {
+
+ // The clickable button for toggling the menu
+ // Remove the gradient and set the same inset shadow as the :active state
+ .dropdown-toggle {
+ background-image: none;
+ .box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)");
+ }
+
+ // Keep the hover's background when dropdown is open
+ .btn.dropdown-toggle {
+ background-color: @btnBackgroundHighlight;
+ }
+ .btn-primary.dropdown-toggle {
+ background-color: @btnPrimaryBackgroundHighlight;
+ }
+ .btn-warning.dropdown-toggle {
+ background-color: @btnWarningBackgroundHighlight;
+ }
+ .btn-danger.dropdown-toggle {
+ background-color: @btnDangerBackgroundHighlight;
+ }
+ .btn-success.dropdown-toggle {
+ background-color: @btnSuccessBackgroundHighlight;
+ }
+ .btn-info.dropdown-toggle {
+ background-color: @btnInfoBackgroundHighlight;
+ }
+ .btn-inverse.dropdown-toggle {
+ background-color: @btnInverseBackgroundHighlight;
+ }
+}
+
+
+// Reposition the caret
+.btn .caret {
+ margin-top: 8px;
+ margin-left: 0;
+}
+// Carets in other button sizes
+.btn-large .caret {
+ margin-top: 6px;
+}
+.btn-large .caret {
+ border-left-width: 5px;
+ border-right-width: 5px;
+ border-top-width: 5px;
+}
+.btn-mini .caret,
+.btn-small .caret {
+ margin-top: 8px;
+}
+// Upside down carets for .dropup
+.dropup .btn-large .caret {
+ border-bottom-width: 5px;
+}
+
+
+/*
+// Account for other colors
+.btn-primary,
+.btn-warning,
+.btn-danger,
+.btn-info,
+.btn-success,
+.btn-inverse {
+ .caret {
+ border-top-color: @white;
+ border-bottom-color: @white;
+ }
+}
+*/
+
+
+// Vertical button groups
+// ----------------------
+
+.btn-group-vertical {
+ display: inline-block; // makes buttons only take up the width they need
+ .ie7-inline-block();
+}
+.btn-group-vertical > .btn {
+ display: block;
+ float: none;
+ max-width: 100%;
+ .border-radius(0);
+}
+.btn-group-vertical > .btn + .btn {
+ margin-left: 0;
+ margin-top: -1px;
+}
+.btn-group-vertical > .btn:first-child {
+ .border-radius(@baseBorderRadius @baseBorderRadius 0 0);
+}
+.btn-group-vertical > .btn:last-child {
+ .border-radius(0 0 @baseBorderRadius @baseBorderRadius);
+}
+.btn-group-vertical > .btn-large:first-child {
+ .border-radius(@borderRadiusLarge @borderRadiusLarge 0 0);
+}
+.btn-group-vertical > .btn-large:last-child {
+ .border-radius(0 0 @borderRadiusLarge @borderRadiusLarge);
+}
diff --git a/src/Umbraco.Web.UI.Client/src/less/buttons.less b/src/Umbraco.Web.UI.Client/src/less/buttons.less
index 0b21864127..51dcce7b92 100644
--- a/src/Umbraco.Web.UI.Client/src/less/buttons.less
+++ b/src/Umbraco.Web.UI.Client/src/less/buttons.less
@@ -189,11 +189,19 @@ input[type="button"] {
}
// Success appears as green
.btn-success {
- .buttonBackground(@btnSuccessBackground, @btnSuccessBackgroundHighlight);
+ .buttonBackground(@btnSuccessBackground, @btnSuccessBackgroundHighlight, @btnSuccessType);
}
// Info appears as a neutral blue
.btn-info {
- .buttonBackground(@btnInfoBackground, @btnInfoBackgroundHighlight);
+ .buttonBackground(@sand-5, @blueDark, @blueExtraDark, @u-white);
+}
+// Made for Umbraco, 2019
+.btn-action {
+ .buttonBackground(@pinkLight, @blueDark, @blueExtraDark, @u-white);
+}
+// Made for Umbraco, 2019, used for buttons that has to stand back.
+.btn-white {
+ .buttonBackground(@btnWhiteBackground, @btnWhiteBackgroundHighlight, @btnWhiteType, @btnWhiteTypeHover);
}
// Inverse appears as dark gray
.btn-inverse {
@@ -226,25 +234,27 @@ input[type="button"] {
background: @green;
color: @white;
font-weight: bold;
- &:hover {
+ &:hover {
background: @green-d1;
- }
+ }
}
// outlined
.btn-outline {
- border: 1px solid @gray-8;
+ border: 1px solid;
+ border-color: @gray-7;
background: @white;
- color: @black;
+ color: @blueExtraDark;
padding: 5px 13px;
+ transition: all .2s linear;
}
.btn-outline:hover,
.btn-outline:focus,
.btn-outline:active {
- border-color: @gray-7;
- background: transparent;
- color: @black;
+ border-color: @ui-light-type-hover;
+ color: @ui-light-type-hover;
+ background: @white;
}
// Cross-browser Jank
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 cbb38a23b1..a144336a54 100644
--- a/src/Umbraco.Web.UI.Client/src/less/canvas-designer.less
+++ b/src/Umbraco.Web.UI.Client/src/less/canvas-designer.less
@@ -113,7 +113,7 @@ a, a:hover{
-webkit-box-shadow: none;
box-shadow: none;
}
-
+/*
.btn-success {
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
@@ -133,7 +133,7 @@ a, a:hover{
.btn-success:hover {
color: #ffffff;
}
-
+*/
.btn-group > .btn + .dropdown-toggle {
-webkit-box-shadow: none;
box-shadow: none;
@@ -207,14 +207,14 @@ a, a:hover{
clear: both;
font-weight: normal;
line-height: 20px;
- color: #343434;
+ color: black;
white-space: nowrap;
cursor:pointer;
}
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus, .dropdown-submenu:hover > a, .dropdown-submenu:focus > a {
color: #000000;
- background: #f8f8f8;
+ background: #e4e0dd;
}
/****************************/
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/application/umb-app-header.less b/src/Umbraco.Web.UI.Client/src/less/components/application/umb-app-header.less
index a033e8abef..86ead685b8 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/application/umb-app-header.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/application/umb-app-header.less
@@ -1,5 +1,5 @@
.umb-app-header {
- background: @purple;
+ background: @blueExtraDark;
display: flex;
align-items: center;
justify-content: space-between;
@@ -31,7 +31,7 @@
}
.umb-app-header__action-icon {
- opacity: 0.6;
+ opacity: 0.8;
color: @white;
font-size: 22px;
}
@@ -40,4 +40,3 @@
.umb-app-header__action a:focus .umb-app-header__action-icon {
opacity: 1;
}
-
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/application/umb-dashboard.less b/src/Umbraco.Web.UI.Client/src/less/components/application/umb-dashboard.less
index 2a1d5eb6d3..3257d7b93f 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/application/umb-dashboard.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/application/umb-dashboard.less
@@ -31,5 +31,5 @@
}
.umb-dashboard__header .umb-tabs-nav .umb-tab > a {
- padding-bottom: 23px;
-}
\ No newline at end of file
+ padding-bottom: 25px;
+}
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 2c7f07ef26..8c3b059a94 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
@@ -6,7 +6,7 @@
right: 0;
z-index: 10;
width: @drawerWidth;
- background: @gray-9;
+ background: @brownGrayLight;
box-shadow: inset 5px 0 20px rgba(0,0,0,.3);
}
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 78f631ac0d..c950b01602 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
@@ -16,17 +16,22 @@
border-bottom: 1px solid @gray-9;
height: @editorHeaderHeight;
box-sizing: border-box;
-}
-
-.umb-language-picker__toggle:hover {
- background: @gray-10;
+ color: @ui-option-type;
}
.umb-language-picker__expand {
- color: @gray-6;
font-size: 14px;
}
+.umb-language-picker__toggle:hover {
+ background: @ui-option-hover;
+ color:@ui-option-type-hover;
+ .umb-language-picker__expand {
+ color: @ui-option-type-hover;
+ }
+}
+
+
.umb-language-picker__dropdown {
width: 100%;
background: @white;
@@ -46,11 +51,14 @@
.umb-language-picker__dropdown a:hover,
.umb-language-picker__dropdown a:focus {
- background: @gray-10;
+ background: @ui-option-hover;
text-decoration: none;
+ color:@ui-option-type-hover;
}
-.umb-language-picker__dropdown-item--current {
- background-color: @gray-10;
- border-left: 2px solid @turquoise;
-}
\ No newline at end of file
+.umb-language-picker__dropdown a.umb-language-picker__dropdown-item--current {
+ //background-color: @gray-10;
+ padding-left: 16px;
+ border-left: 4px solid @ui-light-active-border;
+ color:@ui-light-active-type;
+}
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 a302ba71b8..0f4f2a7a9d 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/card.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/card.less
@@ -70,7 +70,7 @@
margin: 0;
}
-.umb-card-list li{
+.umb-card-list li {
border-bottom: @gray-10 1px solid;
padding-bottom: 3px;
display: block;
@@ -123,15 +123,15 @@
.umb-card-grid .umb-card-grid-item:focus,
.umb-card-grid .umb-card-grid-item:hover > *,
.umb-card-grid .umb-card-grid-item:focus > * {
- background: @gray-10;
- //color: white;
+ background: @ui-option-hover;
+ color: @ui-option-type-hover;
cursor: pointer;
outline: none;
border-radius: 3px;
}
.umb-card-grid a {
- color: @gray-2;
+ color: @ui-option-type;
text-decoration: none;
}
@@ -139,7 +139,7 @@
font-size: 30px;
line-height: 50px;
display: block;
- color: @gray-3;
+ color: @ui-option-type;
}
.umb-card-grid .umb-card-grid-item__loading {
@@ -164,9 +164,9 @@
}
.umb-btn-round:hover, .umb-btn-round:hover *{
- background: @turquoise !important;
+ background: @blueDark !important;
color: @white !important;
- border-color: @turquoise !important;
+ border-color: @blueDark !important;
text-decoration:none;
}
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 d699193c24..d576c33b67 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/editor.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/editor.less
@@ -65,7 +65,7 @@
.umb-editor-header {
background: @white;
position: absolute;
- padding: 0 20px;
+ padding-left: 20px;
z-index: @zIndexEditor;
border-bottom: 1px solid @gray-9;
width: 100%;
@@ -101,9 +101,6 @@ input.umb-editor-header__name-input {
padding: 0 10px;
background: @white;
border: 1px solid @gray-8;
- &:hover {
- border-color: @turquoise-d1;
- }
}
input.umb-editor-header__name-input:disabled {
@@ -118,6 +115,14 @@ input.umb-editor-header__name-input:disabled {
}
a.umb-editor-header__close-split-view {
+
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ position: relative;
+ height: 69px;
+ width: 69px;
+
font-size: 20px;
color: @gray-6;
text-decoration: none !important;
@@ -127,6 +132,15 @@ a.umb-editor-header__close-split-view:hover {
color: @black;
}
+.umb-editor-header {
+ .btn-white {
+ height:69px;
+ border-radius: 0;
+ padding-left: 30px;
+ padding-right: 30px;
+ }
+}
+
/* variant switcher */
.umb-variant-switcher__toggle {
display: flex;
@@ -138,22 +152,28 @@ a.umb-editor-header__close-split-view:hover {
height: 30px;
text-decoration: none !important;
font-size: 13px;
- color: @gray-4;
- background-color: @white;
+ //color: @gray-4;
+ color: @ui-action-disgrete-type;
+ //background-color: @white;
}
a.umb-variant-switcher__toggle {
- transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
+ transition: color 0.2s ease-in-out;
&:hover {
- background-color: @gray-10;
+ //background-color: @gray-10;
+ color: @ui-action-disgrete-type-hover;
+ .umb-variant-switcher__expand {
+ color: @ui-action-disgrete-type-hover;
+ }
}
}
.umb-variant-switcher__expand {
- color: @gray-7;
+ color: @ui-action-disgrete-type;
margin-top: 3px;
margin-left: 5px;
margin-right: -5px;
+ transition: color 0.2s ease-in-out;
}
.umb-variant-switcher__item {
@@ -161,27 +181,30 @@ a.umb-variant-switcher__toggle {
justify-content: space-between;
align-items: center;
border-bottom: 1px solid @gray-9;
+ &:hover .umb-variant-switcher__name-wrapper {
+
+ }
}
.umb-variant-switcher__item:last-child {
border-bottom: none;
}
+.umb-variant-switcher_item--current {
+ color: @ui-light-active-type;
+}
.umb-variant-switcher_item--current .umb-variant-switcher__name-wrapper {
- background-color: @gray-10;
- border-left: 2px solid @turquoise;
+ //background-color: @gray-10;
+ border-left: 4px solid @ui-active;
}
.umb-variant-switcher__item:hover,
-.umb-variant-switcher__item:focus,
-.umb-variant-switcher__name-wrapper:hover,
-.umb-variant-switcher__name-wrapper:focus {
- background-color: @gray-10;
+.umb-variant-switcher__item:focus {
outline: none;
}
.umb-variant-switcher_item--not-allowed:not(.umb-variant-switcher_item--current) .umb-variant-switcher__name-wrapper:hover {
- background-color: @white !important;
+ //background-color: @white !important;
cursor: default;
}
@@ -211,7 +234,12 @@ a.umb-variant-switcher__toggle {
.umb-variant-switcher__split-view {
font-size: 13px;
display: none;
- padding: 8px 20px;
+ padding: 16px 20px;
+
+ &:hover {
+ background-color: @ui-option-hover;
+ color: @ui-option-type-hover;
+ }
}
// container
@@ -223,7 +251,7 @@ a.umb-variant-switcher__toggle {
bottom: @editorFooterHeight;
left: 0;
overflow: auto;
- background: @gray-10;
+ background: @brownGrayLight;
}
.umb-editor-wrapper.-no-footer .umb-editor-container {
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 10296b58e3..2b9f1e31a5 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
@@ -48,10 +48,17 @@
padding-right: 10px;
}
+.umb-editor-sub-header__content-left .umb-editor-sub-header__section {
+ padding-left: 0;
+}
+
.umb-editor-sub-header__content-left .umb-editor-sub-header__section:first-child {
padding-left: 0;
}
+.umb-editor-sub-header__content-right .umb-editor-sub-header__section {
+ padding-right: 0;
+}
.umb-editor-sub-header__content-right .umb-editor-sub-header__section:last-child {
padding-right: 0;
}
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/editor/umb-editor.less b/src/Umbraco.Web.UI.Client/src/less/components/editor/umb-editor.less
index 321fabadad..764094a9b8 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/editor/umb-editor.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/editor/umb-editor.less
@@ -12,7 +12,7 @@
right: 0;
bottom: 0;
left: 0;
- background: @gray-10;
+ background: @brownGrayLight;
z-index: @zIndexEditor;
}
@@ -44,4 +44,4 @@
left: 0;
background: rgba(0,0,0,0.4);
z-index: @zIndexEditor;
-}
\ No newline at end of file
+}
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/html/umb-alert.less b/src/Umbraco.Web.UI.Client/src/less/components/html/umb-alert.less
index c9aff190ce..934992fc6e 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/html/umb-alert.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/html/umb-alert.less
@@ -2,20 +2,20 @@
padding: 15px;
box-sizing: border-box;
background-color: @turquoise-washed;
- border: 1px solid @turquoise;
+ border: 1px solid @blueMid;
}
.umb-alert--info {
- background-color: @turquoise-washed;
- border: 1px solid @turquoise;
+ background-color: @blueLight;
+ border: 1px solid @blueDark;
}
.umb-alert--warning {
- background-color: @yellow-washed;
- border: 1px solid @yellow;
+ background-color: @pinkLight;
+ border: 1px solid @pink;
}
.umb-alert--danger {
- background-color: @red-washed;
- border: 1px solid @red;
+ background-color: @pinkLight;
+ border: 1px solid @pink;
}
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/overlays.less b/src/Umbraco.Web.UI.Client/src/less/components/overlays.less
index b2d6cda9b1..6e9c79a0c2 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/overlays.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/overlays.less
@@ -15,8 +15,10 @@
}
.umb-overlay .umb-overlay-header {
- background: @gray-10;
+ //background: @gray-10;
border-bottom: 1px solid @purple-l3;
+ //background: @blueExtraDark;
+ //color:@u-white;
padding: 10px;
margin-top: 0;
flex-grow: 0;
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-actions.less b/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-actions.less
index 15296a6aaa..40a0cc41e3 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-actions.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-actions.less
@@ -23,7 +23,7 @@
.icon {
font-size: 18px;
vertical-align: middle;
- color: @gray-3;
+ //color: @gray-3;
}
}
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 002d076461..097665bdd4 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
@@ -2,7 +2,11 @@
display: block;
min-width: 100%;
width: auto;
-
+
+ .umb-tree-item__label {
+ user-select: none;
+ }
+
&:hover ins {
visibility: visible;
cursor: pointer
@@ -14,17 +18,17 @@
&:hover .umb-tree-item__label {
overflow: hidden;
margin-right: 6px;
- }
+ }
// Loading Animation
// ------------------------
.l {
width: 100%;
- height: 1px;
+ height: 2px;
overflow: hidden;
position: absolute;
left: 0;
- bottom: 0;
+ bottom: -1px;
div {
.umb-loader;
@@ -42,13 +46,14 @@
.umb-tree-item.current > .umb-tree-item__inner {
- background: @turquoise-d1;
+ background: @ui-active;
+ color:@ui-active-type;
// override small icon color. TODO => check usage
-// &:before {
-// color: @turquoise-l2;
-// }
-
+ &:before {
+ color: @blue;
+ }
+
.umb-options {
&:hover i {
@@ -56,8 +61,8 @@
}
i {
- background: @white;
- border-color: @turquoise-d1;
+ background: @ui-active-type;
+ //border-color: @ui-active;
transition: opacity 120ms ease;
}
}
@@ -65,8 +70,8 @@
a,
.umb-tree-icon,
ins {
- color: @white !important;
- background-color: @turquoise-d1;
- border-color: @turquoise-d1;
+ color: @ui-active-type !important;
+ //background-color: @ui-active;
+ //border-color: @ui-active;
}
}
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree-root.less b/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree-root.less
index 72a008b8b6..a3529d5504 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree-root.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree-root.less
@@ -14,7 +14,6 @@
margin: 0;
width: 100%;
display: flex;
- color: @gray-2;
}
.umb-options {
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 38860e6d22..13e2a55089 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
@@ -14,7 +14,7 @@
a, a:hover {
outline: none;
text-decoration: none;
-
+
// TODO: => confirm not in use
// &.noSpr {
// background-position: 0
@@ -28,10 +28,11 @@
visibility: hidden;
text-decoration: none;
font-size: 12px;
- transition: opacity 120ms ease;
+ transition: color 120ms;
&:hover {
- opacity: .7;
+ //opacity: .7;
+ color: @ui-option-type-hover;
}
}
@@ -86,6 +87,23 @@ body.touch .umb-tree {
}
}
+// active is equivilant to selected, its the item that is begin affected by the actions performed in the right-click-dialog.
+.umb-tree-item > .umb-tree-item__inner.active {
+ //background: @ui-selected;
+ border-color: @ui-selected-border;
+ color: @ui-selected-type;
+ a {
+ color: @ui-selected-type;
+ }
+ &:hover {
+ //background: @ui-selected-hover;
+ border-color: @ui-selected-border-hover;
+ color: @ui-selected-type-hover;
+ a {
+ color: @ui-selected-type-hover;
+ }
+ }
+}
.umb-tree-root, .umb-tree-item__inner {
padding: 0;
position: relative;
@@ -93,17 +111,29 @@ body.touch .umb-tree {
display: flex;
flex-wrap: nowrap;
align-items: center;
-
- &.active {
- background: @gray-10;
+
+ border:2px dashed transparent;
+
+ color: @ui-option-type;
+ a {
+ color: @ui-option-type;
}
-
+
&:hover {
- background: @gray-10;
-
+ background: @ui-option-hover;
+
+ color: @ui-option-type-hover;
+ a {
+ color: @ui-option-type-hover;
+ }
+
> .umb-options {
visibility: visible;
}
+
+ .umb-tree-icon {
+ color: @ui-option-type-hover;
+ }
}
}
@@ -245,7 +275,7 @@ body.touch .umb-tree {
.is-container::before {
content: "\e04e";
- color: @turquoise;
+ color: @blue;
font-size: 8px;
padding-left: 13px;
padding-top: 8px;
@@ -273,7 +303,8 @@ body.touch .umb-tree {
.umb-tree-icon {
vertical-align: middle;
margin: 0 13px 0 0;
- color: @gray-1;
+ //color: @gray-1;
+ color: @ui-option-type;
font-size: 20px;
&.blue {
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 de746090b9..21f4a7bda8 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
@@ -70,13 +70,13 @@
}
.umb-avatar--primary {
- background-color: @turquoise-l1;
- color: @white;
+ background-color: @pinkLight;
+ color: @blueExtraDark;
}
.umb-avatar--secondary {
- background-color: @purple-l3;
- color: @white;
+ background-color: @pinkLight;
+ color: @blueExtraDark;
}
.umb-avatar--success {
@@ -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;*/
\ No newline at end of file
+/*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;*/
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-badge.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-badge.less
index 0e3bb35ffa..9a18bef2de 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-badge.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-badge.less
@@ -10,27 +10,27 @@
// Colors
.umb-badge--primary {
- background-color: @turquoise;
+ background-color: @blueDark;
color: @white;
}
.umb-badge--secondary {
- background-color: @purple;
+ background-color: @blueExtraDark;
color: @white;
}
.umb-badge--gray {
- background-color: @gray-8;
- color: @gray-4;
+ background-color: @sand-2;
+ color: @blueDark;
}
.umb-badge--danger {
- background-color: @red-l1;
+ background-color: @red;
color: @white;
}
.umb-badge--warning {
- background-color: @yellow-d1;
+ background-color: @orange;
color: @white;
}
@@ -68,4 +68,4 @@
.umb-badge--xl {
font-size: 20px;
padding: 6px 8px;
-}
\ No newline at end of file
+}
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-child-selector.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-child-selector.less
index 18275631dd..b6cdc0e8d9 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-child-selector.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-child-selector.less
@@ -19,6 +19,13 @@
cursor: pointer;
text-align: center;
justify-content: center;
+
+ color:@ui-action-type;
+ &:hover {
+ color:@ui-action-type-hover;
+ border-color:@ui-action-type-hover;
+ text-decoration:none;
+ }
}
.umb-child-selector__children-container {
@@ -44,11 +51,11 @@
.umb-child-selector__child-name {
font-size: 14px;
}
-
+/*
.umb-child-selector__child-name.-blue {
color: @turquoise-d1;
}
-
+*/
.umb-child-selector__child-actions {
flex: 0 0 50px;
text-align: right;
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-color-swatches.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-color-swatches.less
index 6dc2dd6ff3..8cf64e183c 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-color-swatches.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-color-swatches.less
@@ -57,10 +57,6 @@
.umb-color-box__label {
background: @white;
font-size: 14px;
- display: flex;
- flex-flow: column wrap;
- flex: 1 0 100%;
- justify-content: flex-end;
padding: 1px 5px;
min-height: 45px;
max-width: 100%;
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-editor-navigation.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-editor-navigation.less
index d8b83af67a..c1f099c2a5 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-editor-navigation.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-editor-navigation.less
@@ -10,7 +10,7 @@
cursor: pointer;
display: block;
padding: 4px 10px 0 10px;
- border-bottom: 2px solid transparent;
+ //border-bottom: 4px solid transparent;
min-width: 70px;
border-right: 1px solid @gray-9;
box-sizing: border-box;
@@ -20,6 +20,25 @@
justify-content: center;
height: @editorHeaderHeight;
position: relative;
+
+ color: @ui-active-type;
+
+ &:hover {
+ color: @ui-active-type-hover !important;
+ }
+
+ &::after {
+ content: "";
+ height: 0px;
+ left: 8px;
+ right: 8px;
+ background-color: @ui-light-active-border;
+ position: absolute;
+ bottom: 0;
+ border-radius: 3px 3px 0 0;
+ opacity: 0;
+ transition: all .2s linear;
+ }
}
.umb-sub-views-nav-item:focus {
@@ -32,8 +51,16 @@
}
.umb-sub-views-nav-item.is-active {
- color: @turquoise-d1;
- border-bottom-color: @turquoise-d1;
+ //color: @ui-active;
+ //border-bottom-color: @ui-active;
+
+ //background-color: rgba(@ui-active, 0.25);
+ color: @ui-light-active-type;
+ //border-bottom-color: @ui-active;
+ &::after {
+ opacity: 1;
+ height: 4px;
+ }
}
.show-validation .umb-sub-views-nav-item.-has-error {
@@ -53,7 +80,7 @@
right: 6px;
min-width: 16px;
color: @white;
- background-color: @turquoise-d1;
+ background-color: @ui-active-type;
border: 2px solid @white;
border-radius: 50%;
font-size: 10px;
@@ -63,7 +90,7 @@
display: block;
&.-type-alert {
- background-color: @red-l1;
+ background-color: @red;
}
&.-type-warning {
background-color: @yellow-d2;
@@ -98,7 +125,7 @@
// make dots green the an item is active
.umb-sub-views-nav-item.is-active .umb-sub-views-nav-item__more i {
- background-color: @turquoise-d1;
+ background-color: @ui-active;
}
.umb-sub-views-nav__dropdown.umb-sub-views-nav__dropdown {
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-file-dropzone.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-file-dropzone.less
index b7c58ad3cf..63190f0ed3 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-file-dropzone.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-file-dropzone.less
@@ -43,14 +43,14 @@
// file select link
.file-select {
font-size: 15px;
- color: @turquoise-d1;
+ color: @ui-action-disgrete-type;
cursor: pointer;
margin-top: 10px;
&:hover {
- color: @turquoise-d1;
- text-decoration: underline;
+ color: @ui-action-disgrete-type-hover;
+ text-decoration: none;
}
}
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-flatpickr.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-flatpickr.less
index 1848d55d96..8cdcc8b877 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-flatpickr.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-flatpickr.less
@@ -13,9 +13,9 @@ span.flatpickr-day:hover {
}
span.flatpickr-day.selected {
- background-color: @turquoise;
+ background-color: @ui-selected;
}
span.flatpickr-day.selected:hover {
- background-color: @turquoise-d1;
-}
\ No newline at end of file
+ background-color: @ui-selected-hover;
+}
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-folder-grid.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-folder-grid.less
index d91f24cbca..f5ca1f8438 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-folder-grid.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-folder-grid.less
@@ -14,7 +14,7 @@
padding: 10px 20px;
box-sizing: border-box;
flex: 1 1 200px;
- border: 1px solid transparent;
+ border: 2px dashed transparent;
transition: border 0.2s;
position: relative;
justify-content: space-between;
@@ -22,8 +22,24 @@
user-select: none;
box-shadow: 0 1px 1px 0 rgba(0,0,0,0.16);
border-radius: 3px;
+
+ transition: box-shadow 150ms ease-in-out;
}
+.umb-folder-grid__folder.-selected {
+ box-shadow: 0 2px 8px 0 darken(@ui-selected-border, 20);
+
+ //background: @ui-selected;
+ color:@ui-selected-type;
+ border-color:@ui-selected-border;
+
+ &:hover {
+ color:@ui-selected-type-hover;
+ border-color:@ui-selected-border-hover;
+ }
+}
+
+
.umb-folder-grid__folder:focus,
.umb-folder-grid__folder:active {
text-decoration: none;
@@ -31,8 +47,6 @@
.umb-folder-grid__folder:hover {
text-decoration: none;
- box-shadow: 0 3px 6px 0 rgba(0,0,0,0.16);
- transition: box-shadow 150ms ease-in-out;
}
.umb-folder-grid__folder-description {
@@ -57,7 +71,7 @@
.umb-folder-grid__folder-name:hover {
text-decoration: underline;
}
-
+/*
.umb-folder-grid__action {
opacity: 0;
border: 2px solid @white;
@@ -78,3 +92,4 @@
opacity: 1;
background: @green;
}
+*/
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 7a0b013e68..e25349f555 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
@@ -28,6 +28,13 @@
border: 1px dashed @gray-8;
background: none;
cursor: pointer;
+
+ color: @ui-option-type;
+ &:hover {
+ color: @ui-option-type-hover;
+ border-color: @ui-option-type-hover;
+ text-decoration: none;
+ }
}
.umb-grid-selector__item-content {
@@ -48,7 +55,7 @@
}
.umb-grid-selector__item-label.-blue {
- color: @turquoise-d1;
+ color: @ui-option-type;
}
.umb-grid-selector__item-remove {
@@ -56,6 +63,10 @@
top: 5px;
right: 5px;
cursor: pointer;
+ color: @ui-option-type;
+ &:hover {
+ color: @ui-option-type-hover;
+ }
}
.umb-grid-selector__item-default-label {
@@ -64,9 +75,15 @@
}
.umb-grid-selector__item-default-label.-blue {
- color: @turquoise-d1;
+ color: @ui-option-type;
+ &:hover {
+ color: @ui-option-type-hover;
+ }
}
.umb-grid-selector__item-add {
- color: @turquoise-d1;
+ color: @ui-option-type;
+ &:hover {
+ color: @ui-option-type-hover;
+ }
}
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 be6729bf56..33df17c754 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
@@ -17,7 +17,7 @@
}
.umb-group-builder__group.-active {
- border-color: @turquoise;
+ border-color: @ui-active;
}
.umb-group-builder__group.-inherited {
@@ -33,10 +33,15 @@
align-items: center;
cursor: pointer;
border: 1px dashed @gray-7;
- color: @turquoise-d1;
+ color: @ui-action-type;
font-weight: bold;
position: relative;
box-shadow: none;
+ &:hover {
+ color:@ui-action-type-hover;
+ text-decoration: none;
+ border-color: @ui-active-type-hover;
+ }
}
.umb-group-builder__group.-sortable {
@@ -61,11 +66,12 @@
position: relative;
margin-left: auto;
font-size: 18px;
+ color: @ui-icon;
}
.umb-group-builder__group-remove:hover {
cursor: pointer;
- color: @turquoise;
+ color: @ui-icon-hover;
}
.umb-group-builder__group-title-wrapper {
@@ -296,10 +302,11 @@ input.umb-group-builder__group-title-input:disabled:hover {
font-size: 18px;
position: relative;
cursor: pointer;
+ color: @ui-icon;
}
.umb-group-builder__property-action:hover {
- color: @turquoise;
+ color: @ui-icon-hover;
}
.umb-group-builder__property-tags {
@@ -409,20 +416,21 @@ input.umb-group-builder__group-sort-value {
}
.editor-placeholder {
- border: 1px dashed @gray-8;
+ border: 1px dashed @ui-action-border;
width: 100%;
height: 80px;
line-height: 80px;
text-align: center;
display: block;
border-radius: 5px;
- color: @gray-3;
font-weight: bold;
font-size: 14px;
- color: @turquoise-d1;
-
+ color: @ui-action-type;
+
&:hover {
text-decoration: none;
+ color:@ui-action-type-hover;
+ border-color:@ui-action-border-hover;
}
}
@@ -493,4 +501,4 @@ input.umb-group-builder__group-sort-value {
label.checkbox.no-indent {
width: 100%;
}
-}
\ No newline at end of file
+}
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 6b03d80214..34070256ce 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
@@ -34,7 +34,7 @@
.umb-iconpicker-item.-selected {
background: @gray-10;
- border: solid 1px @turquoise-d1;
+ border: solid 1px @ui-active;
border-radius: @baseBorderRadius;
box-sizing: border-box;
}
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 b0f9a7db3d..a87e7084fb 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
@@ -4,23 +4,24 @@
}
.umb-insert-code-box {
- border: 2px solid @gray-10;
+ border: 1px solid @gray-10;
padding: 15px 20px;
margin-bottom: 10px;
border-radius: 3px;
+ cursor: pointer;
}
-.umb-insert-code-box:hover,
+.umb-insert-code-box:hover,
.umb-insert-code-box.-selected {
- border-color: @turquoise;
- cursor: pointer;
+ background-color: @ui-option-hover;
+ color: @ui-action-type-hover;
+ //border-color: @ui-action-border-hover;
}
.umb-insert-code-box__title {
font-size: 15px;
margin-bottom: 5px;
font-weight: bold;
- color: @black;
}
.umb-insert-code-box__description {
@@ -31,7 +32,7 @@
.umb-insert-code-box__check {
width: 18px;
height: 18px;
- background: @gray-10;
+ background: @gray-10;x
border-radius: 50%;
display: flex;
align-items: center;
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 4fb20f5c68..733836d85f 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
@@ -34,11 +34,12 @@
.umb-list-view-settings__create-new {
font-size: 13px;
- color: @turquoise-d1;
+ color: @ui-action-type;
}
.umb-list-view-settings__create-new:hover {
- color: @turquoise-d1;
+ color: @ui-action-type-hover;
+ border-color: @ui-action-type-hover;
}
.umb-list-view-settings__remove-new {
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 3356c1de68..8185040f23 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
@@ -23,16 +23,30 @@
position: relative;
overflow: hidden;
cursor: pointer;
-
+
+ border: 2px dashed transparent;
box-shadow: 0 1px 1px 0 rgba(0,0,0,.2);
-
- transition: box-shadow 100ms;
+
+ transition: box-shadow 150ms ease-in-out;
}
.umb-media-grid__item.-file {
background-color: @white;
}
+.umb-media-grid__item.-selected {
+ box-shadow: 0 2px 8px 0 darken(@ui-selected-border, 20);
+
+ //background: @ui-selected;
+ color:@ui-selected-type;
+ border-color:@ui-selected-border;
+
+ &:hover {
+ color:@ui-selected-type-hover;
+ border-color:@ui-selected-border-hover;
+ }
+}
+
.umb-media-grid__item-file-icon > span {
color: @white;
background: @gray-4;
@@ -45,10 +59,6 @@
position: relative;
}
-.umb-media-grid__item.-selected {
- box-shadow: 0 2px 8px 0 rgba(0,0,0,.35);
-}
-
.umb-media-grid__item:hover {
text-decoration: none;
}
@@ -90,12 +100,13 @@
box-sizing: border-box;
font-size: 12px;
overflow: hidden;
- color: @white;
+ color: @black;
white-space: nowrap;
- background: @purple;
+ border-top:1px solid @gray-9;
+ background: @white;
transition: opacity 150ms;
}
-
+/*
.umb-media-grid__item.-file .umb-media-grid__item-overlay {
opacity: 1;
color: @gray-4;
@@ -105,9 +116,9 @@
.umb-media-grid__item.-file:hover .umb-media-grid__item-overlay,
.umb-media-grid__item.-file.-selected .umb-media-grid__item-overlay {
color: @white;
- background: @purple;
+ background: @blueExtraDark;
}
-
+*/
.umb-media-grid__info {
margin-right: 5px;
}
@@ -134,7 +145,7 @@
font-size: 40px !important;
transform: translate(-50%,-50%);
}
-
+/*
.umb-media-grid__checkmark {
position: absolute;
z-index: 2;
@@ -152,7 +163,7 @@
color: @white;
transition: background 100ms;
}
-
+*/
.umb-media-grid__edit {
position: absolute;
opacity: 0;
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-node-preview.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-node-preview.less
index 07bc32d79a..5b27206fc2 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-node-preview.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-node-preview.less
@@ -71,12 +71,12 @@
margin-right: 5px;
font-size: 13px;
font-weight: bold;
- color: @gray-5;
+ color: @ui-action-type;
cursor: pointer;
}
.umb-node-preview__action:hover {
- color: @turquoise;
+ color: @ui-action-type-hover;
text-decoration: none;
opacity: 1;
}
@@ -90,14 +90,16 @@
align-items: center;
justify-content: center;
border: 1px dashed @gray-7;
- color: @turquoise-d1;
+ color: @ui-action-type;
font-weight: bold;
padding: 5px 15px;
box-sizing: border-box;
}
.umb-node-preview-add:hover {
- color: @turquoise-d1;
+ color: @ui-action-type-hover;
+ border-color: @ui-action-type-hover;
+ text-decoration: none;
}
.umb-editor-wrapper .umb-node-preview-add {
@@ -112,4 +114,4 @@
.umb-node-preview-add {
max-width: none;
}
-}
\ No newline at end of file
+}
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-package-local-install.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-package-local-install.less
index 99759fcee7..d229bc81b6 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-package-local-install.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-package-local-install.less
@@ -13,7 +13,7 @@
position: relative;
width: 500px;
height: 300px;
- border: 2px dashed @gray-8;
+ border: 2px dashed @ui-action-border;
border-radius: 3px;
background: @white;
display: flex;
@@ -22,10 +22,9 @@
align-items: center;
margin-bottom: 30px;
transition: 100ms box-shadow ease, 100ms border ease;
-
- &:hover,
+
&.drag-over {
- border-color: @turquoise;
+ border-color: @ui-action-border-hover;
border-style: solid;
box-shadow: 0 3px 8px rgba(0,0,0, .1);
transition: 100ms box-shadow ease, 100ms border ease;
@@ -34,18 +33,19 @@
.umb-upload-local__dropzone i {
display: block;
- color: @gray-8;
+ color: @ui-action-type;
font-size: 110px;
line-height: 1;
}
.umb-upload-local__select-file {
font-weight: bold;
- color: @turquoise-d1;
+ color: @ui-action-type;
cursor: pointer;
&:hover {
text-decoration: underline;
+ color: @ui-action-type-hover;
}
}
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 348d7bb5db..5e98075fc2 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
@@ -17,7 +17,7 @@
}
.umb-progress-circle__highlight--primary {
- stroke: @turquoise;
+ stroke: @blue;
}
.umb-progress-circle__highlight--secondary {
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-tabs.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-tabs.less
index 9da54f0bf9..f22d8b3a16 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-tabs.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-tabs.less
@@ -14,24 +14,54 @@
}
.umb-tab > a {
+
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ position: relative;
+
cursor: pointer;
- border-bottom: 2px solid transparent;
- color: @gray-3;
+ //border-bottom: 4px solid transparent;
+ color: @ui-light-type;
padding: 5px 20px 15px 20px;
transition: color 150ms ease-in-out;
+ &:focus {
+ color: @ui-light-type-hover;
+ }
+ &:hover {
+ color: @ui-light-type-hover;
+ text-decoration: none;
+ }
+ &::after {
+ content: "";
+ height: 0px;
+ left: 14px;
+ right: 14px;
+ background-color: @ui-light-active-border;
+ position: absolute;
+ bottom: 0;
+ border-radius: 3px 3px 0 0;
+ opacity: 0;
+ transition: all .2s linear;
+ }
}
-.umb-tab > a:hover,
-.umb-tab > a:focus {
- color: @black;
- text-decoration: none;
-}
-.umb-tab--active > a,
-.umb-tab--active > a:hover,
-.umb-tab--active > a:focus {
- color: @black;
- border-bottom-color: @turquoise;
+.umb-tab--active > a {
+ color: @ui-light-active-type;
+ //border-bottom-color: @ui-active;
+ /*
+ &:focus {
+ border-bottom-color: @ui-active;
+ }
+ &:hover {
+ border-bottom-color: @ui-active-type-hover;
+ }
+ */
+ &::after {
+ opacity: 1;
+ height: 4px;
+ }
}
.show-validation .umb-tab--error > a,
@@ -72,4 +102,4 @@
display: inline-block;
margin: 0 5px 0 0;
opacity: .6;
-}
\ No newline at end of file
+}
diff --git a/src/Umbraco.Web.UI.Client/src/less/dashboards.less b/src/Umbraco.Web.UI.Client/src/less/dashboards.less
index cc13ad31fd..0ddef2e8b1 100644
--- a/src/Umbraco.Web.UI.Client/src/less/dashboards.less
+++ b/src/Umbraco.Web.UI.Client/src/less/dashboards.less
@@ -133,4 +133,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 f9bb860b5e..7b2afad20b 100644
--- a/src/Umbraco.Web.UI.Client/src/less/forms.less
+++ b/src/Umbraco.Web.UI.Client/src/less/forms.less
@@ -201,7 +201,7 @@ input[type="color"],
margin-bottom: @baseLineHeight / 2;
font-size: @baseFontSize;
line-height: @baseLineHeight;
- color: @gray-3;
+ color: @gray-2;
.border-radius(@inputBorderRadius);
vertical-align: middle;
box-sizing: border-box;
@@ -243,11 +243,12 @@ input[type="color"],
.uneditable-input {
background-color: @inputBackground;
border: 1px solid @inputBorder;
+
.transition(~"border linear .2s, box-shadow linear .2s");
// Focus state
&:focus {
- border-color: none;
+ border-color: @inputBorderFocus;
outline: 0;
outline: none \9; /* IE6-9 */
}
diff --git a/src/Umbraco.Web.UI.Client/src/less/listview.less b/src/Umbraco.Web.UI.Client/src/less/listview.less
index 2271703540..c0cb609afb 100644
--- a/src/Umbraco.Web.UI.Client/src/less/listview.less
+++ b/src/Umbraco.Web.UI.Client/src/less/listview.less
@@ -3,14 +3,6 @@
.umb-listview{width: auto !important;}
-.dropdown-menu > li > a:hover,
-.dropdown-menu > li > a:focus,
-.dropdown-submenu:hover > a,
-.dropdown-submenu:focus > a {
- color: @black;
- background: @gray-10;
-}
-
.umb-listview table {
border: 1px solid @gray-8;
}
@@ -254,8 +246,8 @@
.list-view-add-layout {
margin-top: 10px;
- color: @turquoise-d1;
- border: 1px dashed @gray-8;
+ color: @ui-action-disgrete-type;
+ border: 1px dashed @ui-action-disgrete-border;
display: flex;
align-items: center;
justify-content: center;
@@ -265,4 +257,6 @@
.list-view-add-layout:hover {
text-decoration: none;
+ color: @ui-action-disgrete-type-hover;
+ border-color: @ui-action-disgrete-border-hover;
}
diff --git a/src/Umbraco.Web.UI.Client/src/less/main.less b/src/Umbraco.Web.UI.Client/src/less/main.less
index 12a13e11ed..b363170ebc 100644
--- a/src/Umbraco.Web.UI.Client/src/less/main.less
+++ b/src/Umbraco.Web.UI.Client/src/less/main.less
@@ -120,7 +120,7 @@ h5.-black {
margin: 20px;
}
.umb-control-group {
- border-bottom: 1px solid @gray-10;
+ border-bottom: 1px solid @gray-11;
padding-bottom: 20px;
margin-bottom: 15px !important;
}
@@ -495,7 +495,7 @@ table thead a {
// ------------------------
.umb-loader{
-background-color: @turquoise-d1;
+background-color: @blue;
margin-top:0;
margin-left:-100%;
-moz-animation-name:bounce_loadingProgressG;
@@ -519,7 +519,7 @@ animation-duration:1s;
animation-iteration-count:infinite;
animation-timing-function:linear;
width:100%;
-height:1px;
+height:2px;
}
@@ -671,4 +671,3 @@ input[type=checkbox]:checked + .input-label--small {
width: 1px !important;
overflow: hidden;
}
-
diff --git a/src/Umbraco.Web.UI.Client/src/less/mixins.less b/src/Umbraco.Web.UI.Client/src/less/mixins.less
index 5b4211f177..b67fd1dd25 100644
--- a/src/Umbraco.Web.UI.Client/src/less/mixins.less
+++ b/src/Umbraco.Web.UI.Client/src/less/mixins.less
@@ -515,28 +515,39 @@
// Button backgrounds
// ------------------
-.buttonBackground(@startColor, @endColor, @textColor: #fff) {
+.buttonBackground(@startColor, @hoverColor: @startColor, @textColor: #fff, @textColorHover: @textColor) {
// gradientBar will set the background to a pleasing blend of these, to support IE<=9
- .gradientBar(@startColor, @endColor, @textColor);
- *background-color: @endColor; /* Darken IE7 buttons by default so they stand out more given they won't have borders */
+ //.gradientBar(@startColor, @endColor, @textColor);
+
+ color: @textColor;
+ border-color: @startColor @startColor darken(@startColor, 15%);
+ border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
+
+ background-color: @startColor; /* Darken IE7 buttons by default so they stand out more given they won't have borders */
.reset-filter();
-
- // button states
- &:hover, &:focus, &:active {
- background-color: darken(@startColor, 2%);
+
+ .caret {
+ border-top-color: @textColor;
+ border-bottom-color: @textColor;
}
// in these cases the gradient won't cover the background, so we override
- &:hover, &:focus, &:active, &.active, &.disabled, &[disabled] {
- color: @textColor;
- *background-color: darken(@endColor, 5%);
+ &:hover, &:focus, &:active, &.active {
+ color: @textColorHover;
+ background-color: @hoverColor;
}
-
+
+ &.disabled, &[disabled] {
+ color: @white;
+ background-color: @sand-2;
+ }
+ /*
// IE 7 + 8 can't handle box-shadow to show active, so we darken a bit ourselves
&:active,
&.active {
background-color: darken(@endColor, 10%) e("\9");
}
+ */
}
// Navbar vertical align
diff --git a/src/Umbraco.Web.UI.Client/src/less/navs.less b/src/Umbraco.Web.UI.Client/src/less/navs.less
index d9656f194b..0101113670 100644
--- a/src/Umbraco.Web.UI.Client/src/less/navs.less
+++ b/src/Umbraco.Web.UI.Client/src/less/navs.less
@@ -233,6 +233,12 @@
.dropdown-menu > li > a {
padding: 8px 20px;
+ color: @ui-option-type;
+}
+
+.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus, .dropdown-submenu:hover > a, .dropdown-submenu:focus > a {
+ color: @ui-option-type-hover;
+ background: @ui-option-hover;
}
.nav-tabs .dropdown-menu {
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 3ec8c383da..8d1b70c35d 100644
--- a/src/Umbraco.Web.UI.Client/src/less/property-editors.less
+++ b/src/Umbraco.Web.UI.Client/src/less/property-editors.less
@@ -230,21 +230,33 @@
//
// Media picker
// --------------------------------------------------
+
+.umb-mediapicker > div {
+ border: 1px solid @inputBorder;
+}
+.umb-mediapicker-single > div {
+ width:144px;
+}
+.umb-mediapicker-multi > div {
+ width:100%;
+}
+
+
.umb-mediapicker .add-link {
display: flex;
justify-content:center;
align-items:center;
- width: 120px;
+ //width: 120px;
text-align: center;
- color: @gray-8;
- border: 2px @gray-8 dashed;
+ color: @gray-9;
+ border: 2px @gray-9 dashed;
text-decoration: none;
transition: all 150ms ease-in-out;
&:hover {
- color: @turquoise-d1;
- border-color: @turquoise;
+ color: @ui-action-disgrete-type-hover;
+ border-color: @ui-action-disgrete-type-hover;
}
}
@@ -283,7 +295,9 @@
}
.umb-mediapicker .add-link-square {
- height: 120px;
+ height: 100px;
+ width: 100px;
+ margin: 10px;
}
@@ -330,19 +344,28 @@
justify-content: center;
align-items: center;
flex-wrap: wrap;
- padding: 2px;
+ padding: 5px;
margin: 5px;
background: @white;
- border: 1px solid @gray-10;
+ //border: 1px solid @gray-10;
max-width: 100%;
}
+.umb-mediapicker {
+
+ .umb-sortable-thumbnails li {
+ border:none;
+ }
+
+}
+
.umb-mediapicker .umb-sortable-thumbnails li {
flex-direction: column;
- margin: 0 0 5px 5px;
- padding: 5px;
}
+/*.umb-mediapicker .umb-sortable-thumbnails li.add-wrapper {
+ padding: 0px;
+}*/
.umb-sortable-thumbnails li:hover a {
display: flex;
@@ -445,6 +468,9 @@
align-items: center;
margin-left: 5px;
text-decoration: none;
+
+ //border-color: @inputBorder;
+ .box-shadow(0 1px 2px rgba(0,0,0,0.25));
}
.umb-sortable-thumbnails .umb-sortable-thumbnails__action.-red {
@@ -819,16 +845,16 @@
// Tags
// --------------------------------------------------
.umb-tags{
- border: @gray-10 solid 1px;
+ border: @inputBorder solid 1px;
padding: 10px;
font-size: 13px;
text-shadow: none;
- .tag{
+ .tag {
cursor: default;
margin: 7px;
padding: 10px;
- background: @turquoise;
+ background: @blueDark;
position: relative;
.icon-trash{
diff --git a/src/Umbraco.Web.UI.Client/src/less/rte.less b/src/Umbraco.Web.UI.Client/src/less/rte.less
index 4d3a680523..9aae9840d1 100644
--- a/src/Umbraco.Web.UI.Client/src/less/rte.less
+++ b/src/Umbraco.Web.UI.Client/src/less/rte.less
@@ -42,7 +42,6 @@
}
.umb-rte .mce-tinymce .mce-edit-area {
- border: 1px solid @gray-8 !important;
border-radius: 0px !important;
}
diff --git a/src/Umbraco.Web.UI.Client/src/less/sections.less b/src/Umbraco.Web.UI.Client/src/less/sections.less
index ac41f69998..cf362a67f0 100644
--- a/src/Umbraco.Web.UI.Client/src/less/sections.less
+++ b/src/Umbraco.Web.UI.Client/src/less/sections.less
@@ -28,7 +28,7 @@ ul.sections>li>a {
}
ul.sections>li>a .section__name {
- opacity: 0.6;
+ opacity: 0.8;
transition: opacity .1s linear;
}
@@ -36,7 +36,7 @@ ul.sections>li>a::after {
content: "";
height: 4px;
width: 100%;
- background-color: @turquoise;
+ background-color: @pinkLight;
position: absolute;
bottom: -4px;
border-radius: 3px 3px 0 0;
@@ -45,6 +45,9 @@ ul.sections>li>a::after {
transition: all .2s linear;
}
+ul.sections>li.current>a {
+ color:@pinkLight;
+}
ul.sections>li.current>a::after {
opacity: 1;
bottom: 0;
@@ -54,6 +57,7 @@ ul.sections>li.current>a .section__name,
ul.sections>li>a:hover .section__name,
ul.sections>li>a:focus .section__name {
opacity: 1;
+ -webkit-font-smoothing: subpixel-antialiased;
}
@@ -93,7 +97,7 @@ ul.sections-tray>li>a::after {
content: "";
width: 4px;
height: 100%;
- background-color: @turquoise;
+ background-color: @ui-active;
position: absolute;
border-radius: 0 3px 3px 0;
opacity: 0;
diff --git a/src/Umbraco.Web.UI.Client/src/less/variables.less b/src/Umbraco.Web.UI.Client/src/less/variables.less
index 513c645365..8add7c9002 100644
--- a/src/Umbraco.Web.UI.Client/src/less/variables.less
+++ b/src/Umbraco.Web.UI.Client/src/less/variables.less
@@ -21,20 +21,6 @@
@white: #FFF;
@grayIcon: #9E9E9E;
-// Accent colors
-// -------------------------
-
-
-
-@blue: #2E8AEA;
-@blueDark: #0064CD;
-@blueLight: #ADD8E6;
-@green: #46A546;
-@red: #9D261D;
-@yellow: #FFC40D;
-@orange: #DF7F48;
-@pink: #C3325F;
-
// Colors
// -------------------------
@@ -56,22 +42,22 @@
// UI Colors
@red-d1: #F02E28;
-@red: #FE3E39;
-@red-l1: #FE6561;
+@red: #D42054;// updated 2019
+@red-l1: #e22c60;// updated 2019
@red-l2: #FE8B88;
@red-l3: #FFB2B0;
@red-washed: #FFECEB;
@yellow-d2: #F0AC00;
@yellow-d1: #FFC011;
-@yellow: #FFCE38;
+@yellow: #fad634;// updated 2019
@yellow-l1: #FFD861;
@yellow-l2: #FFE28A;
@yellow-l3: #FFECB0;
@yellow-washed: #FFFAEB;
@green-d1: #1FB572;
-@green: #35C786;
+@green: #2bc37c;// updated 2019
@green-l1: #4ECF95;
@green-l2: #79E1B2;
@green-l3: #A6F0CF;
@@ -88,6 +74,12 @@
@gray-8: #D8D7D9;
@gray-9: #E9E9EB;
@gray-10: #F3F3F5;
+@gray-11: #F6F6F7;
+
+@sand-1: hsl(22, 33%, 93%);// added 2019
+@sand-2: hsl(22, 34%, 88%);// added 2019
+@sand-5: hsl(22, 31%, 93%);// added 2019
+@sand-7: hsl(22, 26%, 97%);// added 2019
// Additional Icon Colours
@@ -109,6 +101,89 @@
@indigoIcon: #3F51B5;
+// Brand colors
+// -------------------------
+
+//@blueLight: #4f89de;
+@blue: #2E8AEA;
+@blueMid: #2152A3;// updated 2019
+@blueDark: #3544b1;// updated 2019
+@blueExtraDark: #1b264f;// added 2019
+@blueLight: #ADD8E6;
+@blueNight: #162335;// added 2019
+@orange: #f79c37;// updated 2019
+@pink: #D93F4C;// #C3325F;// update 2019
+@pinkLight: #f5c1bc;// added 2019
+@pinkRedLight: #ff8a89;// added 2019
+@brown: #9d8057;// added 2019
+@brownLight: #e4e0dd;// added 2019
+@brownGrayLight: #f3f2f1;// added 2019
+@orange: #ff9412;// added 2019
+
+//@u-greyLight: #f2ebe6;// added 2019
+@u-white: #f9f7f4;// added 2019
+@u-black: black;// added 2019
+
+
+// UI colors
+// -------------------------
+
+@ui-option-type: @blueExtraDark;
+@ui-option-hover: @sand-7;
+@ui-option-type-hover: @blueMid;
+
+//@ui-active: #346ab3;
+@ui-active: @pinkLight;
+@ui-active-type: @blueExtraDark;
+@ui-active-type-hover: @blueMid;
+
+@ui-selected: @sand-1;
+@ui-selected-hover: ligthen(@sand-1, 10);
+@ui-selected-type: @blueExtraDark;
+@ui-selected-type-hover: @blueMid;
+@ui-selected-border: @pinkLight;
+@ui-selected-border-hover: @pinkLight;
+
+@ui-light-border: @pinkLight;
+@ui-light-type: @gray-4;
+@ui-light-type-hover: @blueMid;
+
+@ui-light-active-border: @pinkLight;
+@ui-light-active-type: @blueExtraDark;
+@ui-light-active-type-hover: @blueMid;
+
+
+@ui-action: white;
+@ui-action-hover: @sand-7;
+@ui-action-type: @blueExtraDark;
+@ui-action-type-hover: @blueMid;
+@ui-action-border: @blueExtraDark;
+@ui-action-border-hover: @blueMid;
+
+@ui-action-disgrete: white;
+@ui-action-disgrete-hover: @sand-7;
+@ui-action-disgrete-type: @gray-4;
+@ui-action-disgrete-type-hover: @blueMid;
+@ui-action-disgrete-border: @gray-4;
+@ui-action-disgrete-border-hover: @blueMid;
+
+@type-white: @white;
+@type-black: @blueNight;
+
+@ui-btn: @blueExtraDark;
+@ui-btn-hover: @blueMid;
+@ui-btn-type: @white;
+
+@ui-btn-positive: @green;
+@ui-btn-positive-hover: @green-l1;
+@ui-btn-positive-type: @white;
+
+@ui-btn-negative: @red;
+@ui-btn-negative-hover: @red;
+
+@ui-icon: @blueNight;
+@ui-icon-hover: @blueMid;
+
@@ -130,15 +205,12 @@
.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; }
@@ -193,7 +265,7 @@
// -------------------------
@appHeaderHeight: 55px;
@bodyBackground: @gray-10;
-@textColor: @gray-2;
+@textColor: #000;
@editorHeaderHeight: 70px;
@editorFooterHeight: 50px;
@@ -253,19 +325,27 @@
@btnBackgroundHighlight: @gray-9;
@btnBorder: @gray-9;
-@btnPrimaryBackground: @green;
-@btnPrimaryBackgroundHighlight: @green;
+@btnPrimaryBackground: @ui-btn-positive;
+@btnPrimaryBackgroundHighlight: @ui-btn-positive-hover;
-@btnInfoBackground: @purple-l1;
-@btnInfoBackgroundHighlight: @purple-l1;
+@btnInfoType: @ui-btn-type;// updated 2019
+@btnInfoTypeHover: @ui-btn-type;// updated 2019
+@btnInfoBackground: @ui-btn;// updated 2019
+@btnInfoBackgroundHighlight: @ui-btn-hover;// updated 2019
-@btnSuccessBackground: @green;
-@btnSuccessBackgroundHighlight: @green;
+@btnWhiteType: @blueExtraDark;// updated 2019
+@btnWhiteTypeHover: @ui-action-type-hover;// updated 2019
+@btnWhiteBackground: @white;// updated 2019
+@btnWhiteBackgroundHighlight: @white;// updated 2019
-@btnWarningBackground: @red-l1;
-@btnWarningBackgroundHighlight: @red-l1;
+@btnSuccessType: @ui-btn-positive-type;// updated 2019
+@btnSuccessBackground: @ui-btn-positive;// updated 2019
+@btnSuccessBackgroundHighlight: @ui-btn-positive-hover;// updated 2019
-@btnDangerBackground: @red-l1;
+@btnWarningBackground: @orange;
+@btnWarningBackgroundHighlight: lighten(@orange, 10%);
+
+@btnDangerBackground: @red;
@btnDangerBackgroundHighlight: @red-l1;
@btnInverseBackground: @gray-2;
@@ -278,7 +358,8 @@
// Forms
// -------------------------
@inputBackground: @white;
-@inputBorder: @gray-7;
+@inputBorder: @gray-8;
+@inputBorderFocus: @gray-7;
@inputBorderRadius: 0;
@inputDisabledBackground: @gray-10;
@formActionsBackground: @gray-9;
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/treepicker/treepicker.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/treepicker/treepicker.controller.js
index 4a43c340db..5883313753 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/treepicker/treepicker.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/treepicker/treepicker.controller.js
@@ -28,8 +28,6 @@ angular.module("umbraco").controller("Umbraco.Editors.TreePickerController",
vm.treeAlias = $scope.model.treeAlias;
vm.multiPicker = $scope.model.multiPicker;
vm.hideHeader = (typeof $scope.model.hideHeader) === "boolean" ? $scope.model.hideHeader : true;
- // if you need to load a not initialized tree set this value to false - default is true
- vm.onlyInitialized = $scope.model.onlyInitialized;
vm.searchInfo = {
searchFromId: $scope.model.startNodeId,
searchFromName: null,
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/treepicker/treepicker.html b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/treepicker/treepicker.html
index da81d48c78..c592b4ec3b 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/treepicker/treepicker.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/treepicker/treepicker.html
@@ -56,7 +56,6 @@
hideheader="{{vm.hideHeader}}"
hideoptions="true"
isdialog="true"
- only-initialized="{{vm.onlyInitialized}}"
customtreeparams="{{vm.customTreeParams}}"
enablelistviewsearch="true"
enablelistviewexpand="true"
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/overlays/user/user.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/overlays/user/user.controller.js
index 3147989821..5ed87f073b 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/overlays/user/user.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/common/overlays/user/user.controller.js
@@ -2,17 +2,18 @@ angular.module("umbraco")
.controller("Umbraco.Overlays.UserController", function ($scope, $location, $timeout, dashboardResource, userService, historyService, eventsService, externalLoginInfo, authResource, currentUserResource, formHelper, localizationService) {
$scope.history = historyService.getCurrent();
- $scope.version = Umbraco.Sys.ServerVariables.application.version + " assembly: " + Umbraco.Sys.ServerVariables.application.assemblyVersion;
+ //$scope.version = Umbraco.Sys.ServerVariables.application.version + " assembly: " + Umbraco.Sys.ServerVariables.application.assemblyVersion;
$scope.showPasswordFields = false;
$scope.changePasswordButtonState = "init";
- $scope.model.subtitle = "Umbraco version" + " " + $scope.version;
-
+ $scope.model.title = "user.name";
+ //$scope.model.subtitle = "Umbraco version" + " " + $scope.version;
+ /*
if(!$scope.model.title) {
localizationService.localize("general_user").then(function(value){
$scope.model.title = value;
});
}
-
+ */
$scope.externalLoginProviders = externalLoginInfo.providers;
$scope.externalLinkLoginFormAction = Umbraco.Sys.ServerVariables.umbracoUrls.externalLinkLoginsUrl;
var evts = [];
@@ -45,7 +46,7 @@ angular.module("umbraco")
$location.path(link);
$scope.model.close();
};
-
+ /*
//Manually update the remaining timeout seconds
function updateTimeout() {
$timeout(function () {
@@ -58,7 +59,7 @@ angular.module("umbraco")
}, 1000, false); // 1 second, do NOT execute a global digest
}
-
+ */
function updateUserInfo() {
//get the user
userService.getCurrentUser().then(function (user) {
@@ -68,7 +69,7 @@ angular.module("umbraco")
$scope.remainingAuthSeconds = $scope.user.remainingAuthSeconds;
$scope.canEditProfile = _.indexOf($scope.user.allowedSections, "users") > -1;
//set the timer
- updateTimeout();
+ //updateTimeout();
authResource.getCurrentUserLinkedLogins().then(function(logins) {
//reset all to be un-linked
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/overlays/user/user.html b/src/Umbraco.Web.UI.Client/src/views/common/overlays/user/user.html
index 8021d66a43..404b4d8dd2 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/overlays/user/user.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/overlays/user/user.html
@@ -4,18 +4,18 @@
-
+
@@ -25,6 +25,7 @@
alias="changePassword"
type="button"
action="togglePasswordFields()"
+ button-style="action"
label="Change password"
label-key="general_changePassword"
button-style="success">
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintrocreatecontent/nodename/nodename.html b/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintrocreatecontent/nodename/nodename.html
index 53badd7843..b048b245c1 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintrocreatecontent/nodename/nodename.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintrocreatecontent/nodename/nodename.html
@@ -19,7 +19,7 @@
-
+
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintrocreatedoctype/doctypename/doctypename.html b/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintrocreatedoctype/doctypename/doctypename.html
index a0b4b529e8..3ae8943560 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintrocreatedoctype/doctypename/doctypename.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintrocreatedoctype/doctypename/doctypename.html
@@ -19,7 +19,7 @@
-
+
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintrocreatedoctype/propertyname/propertyname.html b/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintrocreatedoctype/propertyname/propertyname.html
index 5748f65a95..2c255706c8 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintrocreatedoctype/propertyname/propertyname.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintrocreatedoctype/propertyname/propertyname.html
@@ -19,7 +19,7 @@
-
+
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintrocreatedoctype/tabname/tabname.html b/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintrocreatedoctype/tabname/tabname.html
index baa0d3da9a..0dfa084878 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintrocreatedoctype/tabname/tabname.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintrocreatedoctype/tabname/tabname.html
@@ -19,7 +19,7 @@
-
+
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintromediasection/foldername/foldername.html b/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintromediasection/foldername/foldername.html
index 1a9bd41226..063f332e1d 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintromediasection/foldername/foldername.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintromediasection/foldername/foldername.html
@@ -19,7 +19,7 @@
-
+
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintromediasection/uploadimages/uploadimages.html b/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintromediasection/uploadimages/uploadimages.html
index e7e8750823..0e13b9b645 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintromediasection/uploadimages/uploadimages.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintromediasection/uploadimages/uploadimages.html
@@ -19,7 +19,7 @@
-
+
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/application/umb-navigation.html b/src/Umbraco.Web.UI.Client/src/views/components/application/umb-navigation.html
index c5b4f69cef..275c814761 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/application/umb-navigation.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/application/umb-navigation.html
@@ -38,7 +38,7 @@
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/application/umb-tour.html b/src/Umbraco.Web.UI.Client/src/views/components/application/umb-tour.html
index b801d63cca..b756d23b50 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/application/umb-tour.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/application/umb-tour.html
@@ -31,11 +31,11 @@