Improvements to Repeater form widget styling
Improved the styling of the Repeater form widget, made it easier to distinguish between individual repeater items
This commit is contained in:
Luke Towers
parent
3011c39d2b
commit
29c0c8c33d
|
|
@ -71,6 +71,7 @@ class ServiceProvider extends ModuleServiceProvider
|
|||
$combiner->registerBundle('~/modules/backend/widgets/mediamanager/assets/js/mediamanager-browser.js');
|
||||
$combiner->registerBundle('~/modules/backend/widgets/mediamanager/assets/less/mediamanager.less');
|
||||
$combiner->registerBundle('~/modules/backend/formwidgets/codeeditor/assets/less/codeeditor.less');
|
||||
$combiner->registerBundle('~/modules/backend/formwidgets/repeater/assets/less/repeater.less');
|
||||
$combiner->registerBundle('~/modules/backend/formwidgets/codeeditor/assets/js/build.js');
|
||||
$combiner->registerBundle('~/modules/backend/formwidgets/fileupload/assets/less/fileupload.less');
|
||||
|
||||
|
|
|
|||
|
|
@ -1,208 +1,36 @@
|
|||
.field-repeater {
|
||||
padding-top: 5px;
|
||||
}
|
||||
.field-repeater ul.field-repeater-items,
|
||||
.field-repeater li.field-repeater-item {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.field-repeater ul.field-repeater-items > li.dragged {
|
||||
opacity: .7;
|
||||
position: absolute;
|
||||
padding-top: 15px;
|
||||
padding-right: 15px;
|
||||
z-index: 2000;
|
||||
background-color: #f9f9f9;
|
||||
border: 1px dashed #dbdee0;
|
||||
}
|
||||
.field-repeater ul.field-repeater-items > li.dragged .repeater-item-remove {
|
||||
opacity: 0;
|
||||
}
|
||||
.field-repeater ul.field-repeater-items > li.dragged .repeater-item-collapsed-title {
|
||||
top: 5px;
|
||||
}
|
||||
.field-repeater ul.field-repeater-items > li.placeholder {
|
||||
display: block;
|
||||
position: relative;
|
||||
height: 25px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.field-repeater ul.field-repeater-items > li.placeholder:before {
|
||||
display: block;
|
||||
position: absolute;
|
||||
font-family: FontAwesome;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
text-decoration: inherit;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
*margin-right: .3em;
|
||||
content: "\f054";
|
||||
color: #d35714;
|
||||
left: -10px;
|
||||
top: 8px;
|
||||
z-index: 2000;
|
||||
}
|
||||
.field-repeater li.field-repeater-item {
|
||||
position: relative;
|
||||
margin-left: 5px;
|
||||
padding-left: 15px;
|
||||
border-left: 1px solid #dbdee0;
|
||||
min-height: 30px;
|
||||
}
|
||||
.field-repeater li.field-repeater-item:before {
|
||||
color: #bdc3c7;
|
||||
font-family: FontAwesome;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
text-decoration: inherit;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
*margin-right: .3em;
|
||||
content: "\f111";
|
||||
font-size: 8px;
|
||||
position: absolute;
|
||||
left: -4px;
|
||||
top: -2px;
|
||||
}
|
||||
.field-repeater li.field-repeater-item.collapsed .field-repeater-form {
|
||||
display: none;
|
||||
}
|
||||
.field-repeater li.field-repeater-item.collapsed .repeater-item-collapse .repeater-item-collapse-one {
|
||||
-webkit-transform: scale(1, -1);
|
||||
-ms-transform: scale(1, -1);
|
||||
transform: scale(1, -1);
|
||||
}
|
||||
.field-repeater li.field-repeater-item.collapsed .repeater-item-collapsed-title {
|
||||
display: block;
|
||||
}
|
||||
.field-repeater li.field-repeater-item .repeater-item-collapsed-title {
|
||||
display: none;
|
||||
top: -5px;
|
||||
position: absolute;
|
||||
font-size: 13px;
|
||||
}
|
||||
.field-repeater li.field-repeater-item .field-repeater-form {
|
||||
position: relative;
|
||||
top: -7px;
|
||||
}
|
||||
.field-repeater li.field-repeater-item .field-repeater-form:before,
|
||||
.field-repeater li.field-repeater-item .field-repeater-form:after {
|
||||
content: " ";
|
||||
display: table;
|
||||
}
|
||||
.field-repeater li.field-repeater-item .field-repeater-form:after {
|
||||
clear: both;
|
||||
}
|
||||
.field-repeater li.field-repeater-item .repeater-item-handle {
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
left: -10px;
|
||||
color: #bdc3c7;
|
||||
background: #f9f9f9;
|
||||
cursor: move;
|
||||
opacity: 0;
|
||||
border-radius: 999px;
|
||||
-webkit-transition: opacity 0.5s;
|
||||
transition: opacity 0.5s;
|
||||
}
|
||||
.field-repeater li.field-repeater-item .repeater-item-handle:hover {
|
||||
color: #999;
|
||||
}
|
||||
.field-repeater li.field-repeater-item .repeater-item-collapse {
|
||||
position: absolute;
|
||||
top: -9px;
|
||||
right: 22px;
|
||||
z-index: 90;
|
||||
}
|
||||
.field-repeater li.field-repeater-item .repeater-item-collapse a,
|
||||
.field-repeater li.field-repeater-item .repeater-item-collapse button {
|
||||
-webkit-transition: transform 0.3s;
|
||||
transition: transform 0.3s;
|
||||
color: #bdc3c7;
|
||||
line-height: 20px;
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
}
|
||||
.field-repeater li.field-repeater-item .repeater-item-collapse a:hover,
|
||||
.field-repeater li.field-repeater-item .repeater-item-collapse button:hover,
|
||||
.field-repeater li.field-repeater-item .repeater-item-collapse a:focus,
|
||||
.field-repeater li.field-repeater-item .repeater-item-collapse button:focus {
|
||||
color: #999;
|
||||
text-decoration: none;
|
||||
}
|
||||
.field-repeater li.field-repeater-item .repeater-item-remove {
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
right: 0;
|
||||
z-index: 90;
|
||||
}
|
||||
.field-repeater li.field-repeater-item .repeater-item-collapse,
|
||||
.field-repeater li.field-repeater-item .repeater-item-handle,
|
||||
.field-repeater li.field-repeater-item .repeater-item-remove {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
.field-repeater li.field-repeater-item:hover .repeater-item-collapse,
|
||||
.field-repeater li.field-repeater-item:active .repeater-item-collapse,
|
||||
.field-repeater li.field-repeater-item:hover .repeater-item-handle,
|
||||
.field-repeater li.field-repeater-item:active .repeater-item-handle,
|
||||
.field-repeater li.field-repeater-item:hover .repeater-item-remove,
|
||||
.field-repeater li.field-repeater-item:active .repeater-item-remove {
|
||||
opacity: 1;
|
||||
}
|
||||
.field-repeater .field-repeater-add-item {
|
||||
position: relative;
|
||||
margin-top: 10px;
|
||||
margin-left: 20px;
|
||||
border: 2px dotted #e0e0e0;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.field-repeater .field-repeater-add-item:before {
|
||||
color: #bdc3c7;
|
||||
font-family: FontAwesome;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
text-decoration: inherit;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
*margin-right: .3em;
|
||||
content: "\f067";
|
||||
font-size: 16px;
|
||||
position: absolute;
|
||||
left: -23px;
|
||||
top: -11px;
|
||||
}
|
||||
.field-repeater .field-repeater-add-item > a {
|
||||
color: #bdc3c7;
|
||||
text-align: center;
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
padding: 13px 15px;
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
}
|
||||
.field-repeater .field-repeater-add-item:hover,
|
||||
.field-repeater .field-repeater-add-item:focus {
|
||||
background-color: #4ea5e0;
|
||||
border-color: transparent;
|
||||
}
|
||||
.field-repeater .field-repeater-add-item:hover:before,
|
||||
.field-repeater .field-repeater-add-item:focus:before {
|
||||
color: #999;
|
||||
}
|
||||
.field-repeater .field-repeater-add-item:hover > a,
|
||||
.field-repeater .field-repeater-add-item:focus > a {
|
||||
color: #ffffff;
|
||||
}
|
||||
.field-repeater .field-repeater-add-item:active {
|
||||
background: #3498db;
|
||||
border-color: transparent;
|
||||
}
|
||||
.field-repeater .field-repeater-add-item:active > a {
|
||||
color: #ffffff;
|
||||
}
|
||||
.field-repeater .field-repeater-add-item.in-progress {
|
||||
border-color: #e0e0e0 !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
.field-repeater{padding-top:5px}
|
||||
.field-repeater .field-repeater-items{counter-reset:repeater-index-counter}
|
||||
.field-repeater ul.field-repeater-items,.field-repeater li.field-repeater-item{padding:0;margin:0;list-style:none}
|
||||
.field-repeater ul.field-repeater-items > li.dragged{opacity:.7;position:absolute;padding-top:15px;padding-right:15px;z-index:2000;background-color:#f9f9f9;border:1px dashed #dbdee0}
|
||||
.field-repeater ul.field-repeater-items > li.dragged .repeater-item-remove{opacity:0}
|
||||
.field-repeater ul.field-repeater-items > li.dragged .repeater-item-collapsed-title{top:5px}
|
||||
.field-repeater ul.field-repeater-items > li.placeholder{display:block;position:relative;height:25px;margin-bottom:5px}
|
||||
.field-repeater ul.field-repeater-items > li.placeholder:before{display:block;position:absolute;font-family:FontAwesome;font-weight:normal;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased;*margin-right:.3em;content:"\f054";color:#d35714;left:-10px;top:8px;z-index:2000}
|
||||
.field-repeater li.field-repeater-item{position:relative;margin:0 0 1em 1em !important;padding:1.5em 1.25em 0 1.25em !important;background:#f5f5f5;border:1px solid #d1d6d9;border-radius:3px;box-shadow:inset 0 1px 0 rgba(209,214,217,0.25),0 1px 0 rgba(255,255,255,.5);min-height:30px}
|
||||
.field-repeater li.field-repeater-item:before{color:#bdc3c7;font-family:FontAwesome;font-weight:normal;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased;*margin-right:.3em;content:"\f111";font-size:8px;position:absolute;left:-18px;top:-2px}
|
||||
.field-repeater li.field-repeater-item:after{counter-increment:repeater-index-counter;content:counter(repeater-index-counter);display:block;position:absolute;font-size:12px;left:-27px;color:#bdc3c7;top:10px;width:24px;text-align:center}
|
||||
.field-repeater li.field-repeater-item.collapsed .field-repeater-form{display:none}
|
||||
.field-repeater li.field-repeater-item.collapsed .repeater-item-collapse .repeater-item-collapse-one{-webkit-transform:scale(1,-1);-ms-transform:scale(1,-1);transform:scale(1,-1)}
|
||||
.field-repeater li.field-repeater-item.collapsed .repeater-item-collapsed-title{display:block}
|
||||
.field-repeater li.field-repeater-item .repeater-item-collapsed-title{display:none;position:absolute;font-size:13px;top:50%;left:10px;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}
|
||||
.field-repeater li.field-repeater-item .field-repeater-form{position:relative;top:-7px}
|
||||
.field-repeater li.field-repeater-item .field-repeater-form:before,.field-repeater li.field-repeater-item .field-repeater-form:after{content:" ";display:table}
|
||||
.field-repeater li.field-repeater-item .field-repeater-form:after{clear:both}
|
||||
.field-repeater li.field-repeater-item .repeater-item-handle{position:absolute;top:-6px;left:-25px;color:#bdc3c7;background:#f9f9f9;cursor:move;opacity:0;border-radius:999px;-webkit-transition:opacity 0.5s;transition:opacity 0.5s}
|
||||
.field-repeater li.field-repeater-item .repeater-item-handle:hover{color:#999}
|
||||
.field-repeater li.field-repeater-item .repeater-item-collapse{position:absolute;top:5px;right:30px;z-index:90}
|
||||
.field-repeater li.field-repeater-item .repeater-item-collapse a,.field-repeater li.field-repeater-item .repeater-item-collapse button{-webkit-transition:transform 0.3s;transition:transform 0.3s;color:#bdc3c7;line-height:20px;display:block;font-size:12px}
|
||||
.field-repeater li.field-repeater-item .repeater-item-collapse a:hover,.field-repeater li.field-repeater-item .repeater-item-collapse button:hover,.field-repeater li.field-repeater-item .repeater-item-collapse a:focus,.field-repeater li.field-repeater-item .repeater-item-collapse button:focus{color:#999;text-decoration:none}
|
||||
.field-repeater li.field-repeater-item .repeater-item-remove{position:absolute;top:4px;right:5px;z-index:90}
|
||||
.field-repeater li.field-repeater-item .repeater-item-remove .close{float:none;display:inline-block}
|
||||
.field-repeater li.field-repeater-item .repeater-item-collapse,.field-repeater li.field-repeater-item .repeater-item-handle,.field-repeater li.field-repeater-item .repeater-item-remove{width:20px;height:20px;text-align:center}
|
||||
.field-repeater li.field-repeater-item:hover .repeater-item-collapse,.field-repeater li.field-repeater-item:active .repeater-item-collapse,.field-repeater li.field-repeater-item:hover .repeater-item-handle,.field-repeater li.field-repeater-item:active .repeater-item-handle,.field-repeater li.field-repeater-item:hover .repeater-item-remove,.field-repeater li.field-repeater-item:active .repeater-item-remove{opacity:1}
|
||||
.field-repeater .field-repeater-add-item{position:relative;margin-top:10px;margin-left:20px;border:2px dotted #e0e0e0;border-radius:5px}
|
||||
.field-repeater .field-repeater-add-item:before{color:#bdc3c7;font-family:FontAwesome;font-weight:normal;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased;*margin-right:.3em;content:"\f067";font-size:16px;position:absolute;left:-23px;top:-11px}
|
||||
.field-repeater .field-repeater-add-item > a{color:#bdc3c7;text-align:center;display:block;text-decoration:none;padding:13px 15px;text-transform:uppercase;font-weight:600;font-size:12px}
|
||||
.field-repeater .field-repeater-add-item:hover,.field-repeater .field-repeater-add-item:focus{background-color:#4ea5e0;border-color:transparent}
|
||||
.field-repeater .field-repeater-add-item:hover:before,.field-repeater .field-repeater-add-item:focus:before{color:#999}
|
||||
.field-repeater .field-repeater-add-item:hover > a,.field-repeater .field-repeater-add-item:focus > a{color:#ffffff}
|
||||
.field-repeater .field-repeater-add-item:active{background:#3498db;border-color:transparent}
|
||||
.field-repeater .field-repeater-add-item:active > a{color:#ffffff}
|
||||
.field-repeater .field-repeater-add-item.in-progress{border-color:#e0e0e0 !important;background:transparent !important}
|
||||
|
|
@ -3,6 +3,10 @@
|
|||
.field-repeater {
|
||||
padding-top: 5px;
|
||||
|
||||
.field-repeater-items {
|
||||
counter-reset: repeater-index-counter;
|
||||
}
|
||||
|
||||
ul.field-repeater-items,
|
||||
li.field-repeater-item {
|
||||
padding: 0;
|
||||
|
|
@ -48,9 +52,12 @@
|
|||
|
||||
li.field-repeater-item {
|
||||
position: relative;
|
||||
margin-left: 5px;
|
||||
padding-left: 15px;
|
||||
border-left: 1px solid #dbdee0;
|
||||
margin: 0 0 1em 1em !important;
|
||||
padding: 1.5em 1.25em 0 1.25em !important;
|
||||
background: #f5f5f5;
|
||||
border: 1px solid @input-border;
|
||||
border-radius: @border-radius-base;
|
||||
box-shadow: @input-box-shadow;
|
||||
min-height: 30px;
|
||||
|
||||
&:before {
|
||||
|
|
@ -58,10 +65,23 @@
|
|||
.icon(@circle);
|
||||
font-size: 8px;
|
||||
position: absolute;
|
||||
left: -4px;
|
||||
left: -18px;
|
||||
top: -2px;
|
||||
}
|
||||
|
||||
&:after {
|
||||
counter-increment: repeater-index-counter;
|
||||
content: counter(repeater-index-counter);
|
||||
display: block;
|
||||
position: absolute;
|
||||
font-size: 12px;
|
||||
left: -27px;
|
||||
color: #bdc3c7;
|
||||
top: 10px;
|
||||
width: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&.collapsed {
|
||||
.field-repeater-form {
|
||||
display:none;
|
||||
|
|
@ -80,9 +100,11 @@
|
|||
|
||||
.repeater-item-collapsed-title {
|
||||
display: none;
|
||||
top: -5px;
|
||||
position: absolute;
|
||||
font-size: 13px;
|
||||
top: 50%;
|
||||
left: 10px;
|
||||
.transform(translateY(-50%));
|
||||
}
|
||||
|
||||
.field-repeater-form {
|
||||
|
|
@ -94,7 +116,7 @@
|
|||
.repeater-item-handle {
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
left: -10px;
|
||||
left: -25px;
|
||||
color: #bdc3c7;
|
||||
background: @body-bg;
|
||||
cursor: move;
|
||||
|
|
@ -108,8 +130,8 @@
|
|||
|
||||
.repeater-item-collapse {
|
||||
position: absolute;
|
||||
top: -9px;
|
||||
right: 22px;
|
||||
top: 5px;
|
||||
right: 30px;
|
||||
z-index: 90;
|
||||
|
||||
a, button {
|
||||
|
|
@ -129,9 +151,14 @@
|
|||
|
||||
.repeater-item-remove {
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
right: 0;
|
||||
top: 4px;
|
||||
right: 5px;
|
||||
z-index: 90;
|
||||
|
||||
.close {
|
||||
float: none;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.repeater-item-collapse,
|
||||
|
|
|
|||
Loading…
Reference in New Issue