From 4bf17c8a4e29e5ccac9f337c3aa525a3333e4cce Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Fri, 18 Jan 2019 13:19:16 +0100 Subject: [PATCH 1/3] V8 UI Color adjustments --- src/Umbraco.Web.UI.Client/src/less/buttons.less | 4 ++-- .../src/less/components/editor.less | 15 ++++++++------- .../less/components/html/umb-expansion-panel.less | 2 +- src/Umbraco.Web.UI.Client/src/less/forms.less | 5 +++-- .../src/less/property-editors.less | 9 +++------ src/Umbraco.Web.UI.Client/src/less/variables.less | 5 +++-- 6 files changed, 20 insertions(+), 20 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/less/buttons.less b/src/Umbraco.Web.UI.Client/src/less/buttons.less index 0b21864127..ca048ccc92 100644 --- a/src/Umbraco.Web.UI.Client/src/less/buttons.less +++ b/src/Umbraco.Web.UI.Client/src/less/buttons.less @@ -233,7 +233,7 @@ input[type="button"] { // outlined .btn-outline { - border: 1px solid @gray-8; + border: 1px solid @inputBorder; background: @white; color: @black; padding: 5px 13px; @@ -242,7 +242,7 @@ input[type="button"] { .btn-outline:hover, .btn-outline:focus, .btn-outline:active { - border-color: @gray-7; + border-color: @inputBorderFocus; background: transparent; color: @black; } 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..b91ad239dc 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/editor.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/editor.less @@ -88,8 +88,7 @@ } input.umb-editor-header__name-input { - border-color: transparent; - background-color: @white; + font-size: 15px; color: @black; margin-bottom: 0; @@ -98,11 +97,13 @@ input.umb-editor-header__name-input { height: 32px; line-height: 32px; width: 100%; - padding: 0 10px; - background: @white; - border: 1px solid @gray-8; - &:hover { - border-color: @turquoise-d1; + padding-left: 10px; + + background-color: @white; + border: 1px solid @inputBorder; + + &:focus { + border-color: @inputBorderFocus; } } diff --git a/src/Umbraco.Web.UI.Client/src/less/components/html/umb-expansion-panel.less b/src/Umbraco.Web.UI.Client/src/less/components/html/umb-expansion-panel.less index 26347c8501..3612bf6958 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/html/umb-expansion-panel.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/html/umb-expansion-panel.less @@ -13,6 +13,7 @@ cursor: pointer; justify-content: space-between; color: @black; + border-bottom: 1px solid @gray-9; } .umb-expansion-panel__expand { @@ -21,5 +22,4 @@ .umb-expansion-panel__content { padding: 20px; - border-top: 1px solid @gray-9; } \ 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 e3350b4956..81f3298783 100644 --- a/src/Umbraco.Web.UI.Client/src/less/forms.less +++ b/src/Umbraco.Web.UI.Client/src/less/forms.less @@ -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 */ } @@ -817,4 +818,4 @@ legend + .control-group { /* User/group selector */ .group-selector .group-selector-list { float: left; } .group-selector .group-selector-list div { height: 24px; } -.group-selector .group-selector-buttons { float: left; margin: 24px 16px; } +.group-selector .group-selector-buttons { float: left; margin: 24px 16px; } \ No newline at end of file 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..e6d3ab90e4 100644 --- a/src/Umbraco.Web.UI.Client/src/less/property-editors.less +++ b/src/Umbraco.Web.UI.Client/src/less/property-editors.less @@ -4,12 +4,9 @@ // Container styles // -------------------------------------------------- .umb-property-editor { - @media (max-width: 800px) { - width: 100%; - } - @media (min-width: 800px) { - min-width:66.6%; - } + + width: 100%; + max-width: 800px; &-pull { float:left; diff --git a/src/Umbraco.Web.UI.Client/src/less/variables.less b/src/Umbraco.Web.UI.Client/src/less/variables.less index 513c645365..97d33096e6 100644 --- a/src/Umbraco.Web.UI.Client/src/less/variables.less +++ b/src/Umbraco.Web.UI.Client/src/less/variables.less @@ -278,7 +278,8 @@ // Forms // ------------------------- @inputBackground: @white; -@inputBorder: @gray-7; +@inputBorder: @gray-8; +@inputBorderFocus: @gray-7; @inputBorderRadius: 0; @inputDisabledBackground: @gray-10; @formActionsBackground: @gray-9; @@ -517,4 +518,4 @@ // SORTABLE // -------------------------------------------------- @sortableHelperBg: @turquoise-l2; -@sortablePlaceholderBg : @turquoise; +@sortablePlaceholderBg : @turquoise; \ No newline at end of file From 60d86354f391067606dfe3080edf7a1cd2f22c4e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Mon, 21 Jan 2019 09:46:00 +0100 Subject: [PATCH 2/3] Media Picker adjustments --- src/Umbraco.Web.UI.Client/src/less/main.less | 3 +- .../src/less/property-editors.less | 41 +++++++++++++++---- .../src/less/variables.less | 3 +- .../mediapicker/mediapicker.html | 2 +- 4 files changed, 38 insertions(+), 11 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/less/main.less b/src/Umbraco.Web.UI.Client/src/less/main.less index 12a13e11ed..43bc87ed0f 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; } @@ -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/property-editors.less b/src/Umbraco.Web.UI.Client/src/less/property-editors.less index e6d3ab90e4..210178e0a6 100644 --- a/src/Umbraco.Web.UI.Client/src/less/property-editors.less +++ b/src/Umbraco.Web.UI.Client/src/less/property-editors.less @@ -4,9 +4,12 @@ // Container styles // -------------------------------------------------- .umb-property-editor { - - width: 100%; - max-width: 800px; + @media (max-width: 800px) { + width: 100%; + } + @media (min-width: 800px) { + min-width:66.6%; + } &-pull { float:left; @@ -227,6 +230,18 @@ // // 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; @@ -327,19 +342,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; @@ -442,6 +466,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 { diff --git a/src/Umbraco.Web.UI.Client/src/less/variables.less b/src/Umbraco.Web.UI.Client/src/less/variables.less index 97d33096e6..c9cd0f701c 100644 --- a/src/Umbraco.Web.UI.Client/src/less/variables.less +++ b/src/Umbraco.Web.UI.Client/src/less/variables.less @@ -88,6 +88,7 @@ @gray-8: #D8D7D9; @gray-9: #E9E9EB; @gray-10: #F3F3F5; +@gray-11: #F6F6F7; // Additional Icon Colours @@ -518,4 +519,4 @@ // SORTABLE // -------------------------------------------------- @sortableHelperBg: @turquoise-l2; -@sortablePlaceholderBg : @turquoise; \ No newline at end of file +@sortablePlaceholderBg : @turquoise; diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker/mediapicker.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker/mediapicker.html index 4e85668c05..d2b923b17c 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker/mediapicker.html +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker/mediapicker.html @@ -1,4 +1,4 @@ -
+

From d16aa91a5e364f986ba48a1394e145f0d0721cd1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Wed, 23 Jan 2019 15:13:42 +0100 Subject: [PATCH 3/3] remove extra border from MCE-edit-area --- src/Umbraco.Web.UI.Client/src/less/rte.less | 1 - 1 file changed, 1 deletion(-) 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; }