From 294f9b60b5a65f67f53bd368375a7e98ae4777f4 Mon Sep 17 00:00:00 2001 From: Scott Hutchinson Date: Thu, 15 Mar 2018 14:44:10 +1300 Subject: [PATCH] Update widgetarea styling to be inline with SS4 --- css/WidgetAreaEditor.css | 10 ++++----- scss/WidgetAreaEditor.scss | 42 +++++++++++++++++--------------------- 2 files changed, 24 insertions(+), 28 deletions(-) diff --git a/css/WidgetAreaEditor.css b/css/WidgetAreaEditor.css index c51dfbb..c34a08e 100644 --- a/css/WidgetAreaEditor.css +++ b/css/WidgetAreaEditor.css @@ -1,10 +1,10 @@ -@charset "UTF-8"; .WidgetAreaEditor p { margin-bottom: 15px; } -.Widget { padding: 0 7px 7px 7px; margin: 16px 0 16px 0; color: #1f1f1f; background-color: #b0bec7; background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2IwYmVjNyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzkyYTViMiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=="); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #b0bec7), color-stop(100%, #92a5b2)); background-image: -webkit-linear-gradient(#b0bec7, #92a5b2); background-image: -moz-linear-gradient(#b0bec7, #92a5b2); background-image: -o-linear-gradient(#b0bec7, #92a5b2); background-image: linear-gradient(#b0bec7, #92a5b2); border-top: 1px solid #c2cdd4; border-bottom: 1px solid #748d9d; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; } -.Widget h3 { margin: 0; padding: 0; line-height: 40px; text-shadow: #bfcad2 1px 1px 0; -webkit-transition-property: background-image; -moz-transition-property: background-image; -o-transition-property: background-image; transition-property: background-image; -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; -o-transition-duration: 0.2s; transition-duration: 0.2s; -webkit-transition-timing-function: ease-out; -moz-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; } -.Widget .widgetDescription { background: #eceff1; padding: 5px 5px 1px 5px; margin: 0; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; } -.Widget .widgetFields { background: #eceff1; padding: 5px; margin: 7px 0 0 0; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; } +.Widget { padding: 0 1.25rem .75rem; margin: 16px 0 16px 0; color: #4F5861; background-color: #F1F3F6; border: 1px solid #ced5e1; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } +.Widget h3 { color: #43536d; margin: 0; padding: 4px 0; line-height: 40px; -moz-transition-property: background-image; -o-transition-property: background-image; -webkit-transition-property: background-image; transition-property: background-image; -moz-transition-duration: 0.2s; -o-transition-duration: 0.2s; -webkit-transition-duration: 0.2s; transition-duration: 0.2s; -moz-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } +.Widget .widgetDescription { padding: 0 0 .5rem; margin: 0; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } +.Widget .widgetDescription p { margin: 0; } +.Widget .widgetFields { background: #F7F8FA; border-top: 1px solid #dbe0e9; border-bottom: 1px solid #dbe0e9; padding: .75rem 1.25rem; margin: .75rem -1.25rem; } .availableWidgetsHolder { width: 38%; float: left; } diff --git a/scss/WidgetAreaEditor.scss b/scss/WidgetAreaEditor.scss index 8123a32..99dfbdf 100644 --- a/scss/WidgetAreaEditor.scss +++ b/scss/WidgetAreaEditor.scss @@ -3,7 +3,7 @@ // root widget area editor container .WidgetAreaEditor { h2 { - + } p { margin-bottom: 15px; @@ -12,40 +12,36 @@ // base styles for a widget .Widget { - padding: 0 7px 7px 7px; + padding: 0 1.25rem .75rem; margin: 16px 0 16px 0; - color: #1f1f1f; - background-color: #b0bec7; - background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2IwYmVjNyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzkyYTViMiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); - background-size: 100%; - background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #b0bec7), color-stop(100%, #92a5b2)); - background-image: -webkit-linear-gradient(#b0bec7, #92a5b2); - background-image: -moz-linear-gradient(#b0bec7, #92a5b2); - background-image: -o-linear-gradient(#b0bec7, #92a5b2); - background-image: linear-gradient(#b0bec7, #92a5b2); - border-top: 1px solid #c2cdd4; - border-bottom: 1px solid #748d9d; + color: #4F5861; + background-color: #F1F3F6; + border: 1px solid #ced5e1; @include border-radius(3px); h3 { + color: #43536d; margin: 0; - padding: 0; + padding: 4px 0; line-height: 40px; - text-shadow: #bfcad2 1px 1px 0; @include transition-property(background-image); @include transition-duration(0.2s); @include transition-timing-function(ease-out); } .widgetDescription { - background: #eceff1; - padding: 5px 5px 1px 5px; + padding: 0 0 .5rem; margin: 0; @include border-radius(3px); + + p { + margin: 0; + } } .widgetFields { - background: #eceff1; - padding: 5px; - margin: 7px 0 0 0; - @include border-radius(3px); + background: #F7F8FA; + border-top: 1px solid #dbe0e9; + border-bottom: 1px solid #dbe0e9; + padding: .75rem 1.25rem; + margin: .75rem -1.25rem; } } @@ -89,7 +85,7 @@ } .noWidgets { - + } // one column layout when space is limited @@ -103,4 +99,4 @@ width: 100%; float: none; } -} \ No newline at end of file +}