tonyair/silverstripe-widgets
1
0
Fork 0
mirror of https://github.com/silverstripe/silverstripe-widgets synced 2024-10-22 17:05:54 +02:00
Code Issues Projects Releases Wiki Activity

Update widgetarea styling to be inline with SS4

Browse Source
This commit is contained in:
Scott Hutchinson 2018-03-15 14:44:10 +13:00
parent 76b8b3f891
commit 294f9b60b5
2 changed files with 24 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
css/WidgetAreaEditor.css
View File

@ -1,10 +1,10 @@
@charset "UTF-8";
.WidgetAreaEditor p { margin-bottom: 15px; } .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 { 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 { 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 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 { 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 .widgetDescription { padding: 0 0 .5rem; margin: 0; -moz-border-radius: 3px; -webkit-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 .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; } .availableWidgetsHolder { width: 38%; float: left; }

42
scss/WidgetAreaEditor.scss
View File

@ -3,7 +3,7 @@
// root widget area editor container // root widget area editor container
.WidgetAreaEditor { .WidgetAreaEditor {
h2 { h2 {
} }
p { p {
margin-bottom: 15px; margin-bottom: 15px;
@ -12,40 +12,36 @@
// base styles for a widget // base styles for a widget
.Widget { .Widget {
padding: 0 7px 7px 7px; padding: 0 1.25rem .75rem;
margin: 16px 0 16px 0; margin: 16px 0 16px 0;
color: #1f1f1f; color: #4F5861;
background-color: #b0bec7; background-color: #F1F3F6;
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2IwYmVjNyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzkyYTViMiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); border: 1px solid #ced5e1;
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;
@include border-radius(3px); @include border-radius(3px);
h3 { h3 {
color: #43536d;
margin: 0; margin: 0;
padding: 0; padding: 4px 0;
line-height: 40px; line-height: 40px;
text-shadow: #bfcad2 1px 1px 0;
@include transition-property(background-image); @include transition-property(background-image);
@include transition-duration(0.2s); @include transition-duration(0.2s);
@include transition-timing-function(ease-out); @include transition-timing-function(ease-out);
} }
.widgetDescription { .widgetDescription {
background: #eceff1; padding: 0 0 .5rem;
padding: 5px 5px 1px 5px;
margin: 0; margin: 0;
@include border-radius(3px); @include border-radius(3px);
p {
margin: 0;
}
} }
.widgetFields { .widgetFields {
background: #eceff1; background: #F7F8FA;
padding: 5px; border-top: 1px solid #dbe0e9;
margin: 7px 0 0 0; border-bottom: 1px solid #dbe0e9;
@include border-radius(3px); padding: .75rem 1.25rem;
margin: .75rem -1.25rem;
} }
} }
@ -89,7 +85,7 @@
} }
.noWidgets { .noWidgets {
} }
// one column layout when space is limited // one column layout when space is limited
@ -103,4 +99,4 @@
width: 100%; width: 100%;
float: none; float: none;
} }
} }