mirror of
https://github.com/silverstripe/silverstripe-widgets
synced 2024-10-22 17:05:54 +02:00
103 lines
4.7 KiB
SCSS
103 lines
4.7 KiB
SCSS
@import "settings";
|
|
|
|
// root widget area editor container
|
|
.WidgetAreaEditor {
|
|
h2 {
|
|
|
|
}
|
|
p {
|
|
margin-bottom: 15px;
|
|
}
|
|
}
|
|
|
|
// base styles for a widget
|
|
.Widget {
|
|
padding: 0 1.25rem .75rem;
|
|
margin: 16px 0 16px 0;
|
|
color: #4F5861;
|
|
background-color: #F1F3F6;
|
|
border: 1px solid #ced5e1;
|
|
@include border-radius(3px);
|
|
h3 {
|
|
color: #43536d;
|
|
margin: 0;
|
|
padding: 4px 0;
|
|
line-height: 40px;
|
|
@include transition-property(background-image);
|
|
@include transition-duration(0.2s);
|
|
@include transition-timing-function(ease-out);
|
|
}
|
|
.widgetDescription {
|
|
padding: 0 0 .5rem;
|
|
margin: 0;
|
|
@include border-radius(3px);
|
|
|
|
p {
|
|
margin: 0;
|
|
}
|
|
}
|
|
.widgetFields {
|
|
background: #F7F8FA;
|
|
border-top: 1px solid #dbe0e9;
|
|
border-bottom: 1px solid #dbe0e9;
|
|
padding: .75rem 1.25rem;
|
|
margin: .75rem -1.25rem;
|
|
}
|
|
}
|
|
|
|
// container for available widgets
|
|
.availableWidgetsHolder {
|
|
width: 38%;
|
|
float: left;
|
|
}
|
|
|
|
.availableWidgets {
|
|
.Widget {
|
|
h3 {
|
|
cursor: pointer;
|
|
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABR0RVh0Q3JlYXRpb24gVGltZQAxLzUvMTOqzuI/AAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAA8tJREFUSImdlk1MHGUYx38zO7u4s18sC10DBItFEEttUAmaTtFTJ34c9MBc/Iw99qDRHjx6682D9lBvatJotibGaGrWg4k6mgBWuggWKA1oKcm2wLJfs7A7s+OB3XRZ2Q/4n2ae9//+/8/zJu/zvAIHQCSqB4CHAAtY0VQl22iPbdsACE2Iq8C7wGkBCpIkLQOCaZpduxLEgE+Bq5qqGAc2ikT1l4GPXE5pqzscynaHQ49LDoe/kmNaVmo1vjGzGt/w5AumG/gQ+EZTlXxDo0hUDwMXREF4buiRnlR7q/9ko6oB1rdSsblbt12WVZwEzmuqsl7TKBLVZeA7n+x2Dg/2nqyuoBlMzS7paSNXAF7QVGW7bCRWmDiBz3yy2zUy1Hf6MCYAI0N9ik92O4GPI1HdU46LFZyzDlEcGhnqU+oJpTLGYipjLDYyczhEBXitHHOUqnkQiDw5+PBOi8sZqiWwdi8xMXPzn561ewlZEIRrrT5PTy1uONSaX41vPPP3rdtfHT/Wky1X9JZPds/7vXJ/vUwTyXQO+B7Qs8a2WY/rbnF1+WT3KjAO94/ujYGjneF6Gw+Dgd7OI8CbAGIkqocFONKomgpsAwaCYDci+j3ygCgIgSs//iaLwBNOp/RvMw5504LdTjCTL5gNuwqAJDkywAkJOBH0eZLVhLV7iYmF5dVjNnhLIQtIAj8ArkQqo/w0+ZdB6fgFyA70di11drSNVuoEfZ5kfDM5LAEd+2WSSKZzNnyuqcr5Gsm+WPkTiepXNpOZ9s6Otv24XglI7bcSDHjd8c3ke5Go/k4pVASmNVV5OhLVu4DLwAggldYdbQHvHzWSuisB1xPp7CvVK50dbaOl7MpCTM8vb0ei+jkgGPR7GX60V67aNlr1TyKd9QMxCZgsmFZXjUz2wCk5bGAMcLp2vxvCNK0AcFPUVCVu2/adRm2l2rMZUipjLBZtOz1+5pRRvrBfLKysxQ9g1BQWVtbuAp/A/c7wZdrIHW1UVVvA6waeB8Y88gNSPW5uJ38nbeT6ga+hYh5FovpZhyi+/+xTxwfrCZSTadRJfr42N2dZxYvjZ05dqqwI4LJVLE5MzS7p9QT8Xrm/kcnU7JJuWcVfNFW5VI7tN8q/9cnu4GEmrGlZqekby7G0kdsCXtdUJfm/CVuBt9NGbkH/88b6+lYq1qzJ+lYq9vv1+eW0kZsAXtVUZU9bq/cKegm44HJKO93hUC4cau11t7j23LeqV5AEfKCpytVKzkHedWPAOUAB2l1Oac62oWCajwEbgA5c1FTl1/32l43+A2DVjDi0+ffsAAAAAElFTkSuQmCC');
|
|
background-position: center right;
|
|
background-repeat: no-repeat;
|
|
&:hover {
|
|
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABR0RVh0Q3JlYXRpb24gVGltZQAxLzUvMTOqzuI/AAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAABANJREFUSImdlltsVFUUhr8znbZzbUO4VDPJcZqWSgfqxCalNT1tuEQOXh6UyHkQUQvEmKCxoTwY2wcSW4khEESiQIIXTKMZRGM0mMMDJHpqHILiNG0tnTYzGZwYCjV0rp3ScnxwJkxrOzPt/7bX/tf619rZe60tsAR4VK0ceASYBYKKLMXz+ei6DoBQQHAZaAdadF2/l4jHAoBgsdocgiAA+IDTwEVFlhJLFvKo2nPAsVg0crfvshrXLl96bCqZKMvmmMyWSPPmJ/ulrdutNnuZGTgEfKvI0nReIY+qVQCHZ2dmNp07/UFkyPe7O1/VAC53ve/FfftLSktNV4GDiizdWVTIo2oW4PtwKFh86miPe34FhaC9q0dziM57wNOKLE1lhAxZIsXAZ+FQsOR4d2fLckQAjnd3SuFQsBg44VE1a8ZuyOLsnU6lNhzv7pRyBRIrq0fEyuqRfGKp1JQEvJSxFaWreQjwfHTk3dTk3X9WLhZgo7TJ2/ZGh9jYstlyf3b2t4D/hrgY13ft12lp6/YnhsZufrW+SoxnKno1HAoOhwKjNbkyramtSwI/ANrDDnEmF3fi9rgjHAr+BeyEB0f38je9n1bkclwOLvR+sgZ4BcDgUbUKXdfX5KsmC1NAQid9nXLgZmDs0dmZmfLzl/osBqA+HouGClGw2O3wXyfot9rL8nYVgGQyEQPqjEDd2PDQ5HzCRmmT94Xd+6oEQbClTbPAJPAjULJ23XrpyJneBOnj13U9fuGLs6Ne7Upjdpyx4aFJd0PT40Zg9UKZ1NTWJQVB+FyRpYOLJPtM9sKjaufXujas8mpXFuLajEBkoR3/nwNmd0PTAY+qvZU23QeuK7LU5FE1B9ALNADG9H6Rf2jg2iJJjRuBP6rWuZ6fv+PVrjSms8sE4rUD70x5VG0/sMI/PMiZY+9Z5rk1zltTtc5VBviMwFWL1eZYJJM5SMSiOtAKFCei0by3DsBstpQDfoMiS7cMBkM4X1uZh+JCSGJl9UiR0Rjdua05kXmw53bsaru1BKGCsGNX2zjwITzoDF86RKczX1X+oQEz8BTQ+nc4ZMzFXbl6TdghOmuAryFrHnlUbe90KtXR+eae2lwBMsnk6yTdJ84OlppMJ3duaz6VXRFAb0lpqbe9q0fLFSAUGK3JJ9Le1aOVmkw/KbJ0KmNbaJR/Fw4FVyxnwprMlsjrHZ0+h+i8C+xWZGnyfxM2C3scovPGoaMf33G5632Firjc9b7O908EHKLTC+xSZGlOW8v1C3oWOByLRlJ9l9Xk9au/VE7cHp/z3kxmS0Tasq2/eYtstdnLjMDbiixdzOYs5V/XCuwHJGBVLBoZFAQBq83uAiYADTipyNLPC/lnhP4FKHOWW0c+c/gAAAAASUVORK5CYII=');
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// container for used widgets
|
|
.usedWidgetsHolder {
|
|
width: 60%;
|
|
float: right;
|
|
}
|
|
|
|
.usedWidgets {
|
|
.Widget {
|
|
h3 {
|
|
cursor: move;
|
|
}
|
|
.deleteWidget {
|
|
text-align: right;
|
|
padding-top: 11px;
|
|
margin-bottom: 3px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.noWidgets {
|
|
|
|
}
|
|
|
|
// one column layout when space is limited
|
|
@media only screen and (max-width: 1279px) {
|
|
.availableWidgetsHolder {
|
|
width: 100%;
|
|
float: none;
|
|
margin-bottom: 20px;
|
|
}
|
|
.usedWidgetsHolder {
|
|
width: 100%;
|
|
float: none;
|
|
}
|
|
}
|