tonyair
/
silverstripe-widgets
mirror of https://github.com/silverstripe/silverstripe-widgets
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Update widgetarea styling to be inline with SS4

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; }
.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; }

42
scss/WidgetAreaEditor.scss
View File

@ -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;
}
}
}