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 @@ -
+