402 lines
10 KiB
CSS
402 lines
10 KiB
CSS
/*
|
|
* General control styling
|
|
*/
|
|
.control-table .table-container {
|
|
border: 1px solid #e0e0e0;
|
|
-webkit-border-radius: 4px;
|
|
-moz-border-radius: 4px;
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
margin-bottom: 15px;
|
|
}
|
|
.control-table .table-container:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
.control-table.active .table-container {
|
|
border-color: #e0e0e0;
|
|
}
|
|
.control-table table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
table-layout: fixed;
|
|
}
|
|
.control-table table td,
|
|
.control-table table th {
|
|
padding: 0;
|
|
font-size: 13px;
|
|
color: #555555;
|
|
}
|
|
.control-table table [data-view-container] {
|
|
padding: 5px 10px;
|
|
width: 100%;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
min-height: 28px;
|
|
}
|
|
.control-table table.headers:after {
|
|
content: ' ';
|
|
display: block;
|
|
position: absolute;
|
|
left: 1px;
|
|
right: 1px;
|
|
margin-top: -1px;
|
|
border-bottom: 1px solid #e0e0e0;
|
|
}
|
|
.control-table table.headers th {
|
|
padding: 7px 10px;
|
|
font-weight: normal;
|
|
text-transform: uppercase;
|
|
font-size: 11px;
|
|
color: #333333;
|
|
background: white;
|
|
border-right: 1px solid #ecf0f1;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.control-table table.headers th [data-view-container] {
|
|
padding-bottom: 6px;
|
|
}
|
|
.control-table table.headers th:last-child {
|
|
border-right: none;
|
|
}
|
|
.control-table.active table.headers:after {
|
|
border-bottom-color: #e0e0e0;
|
|
}
|
|
.control-table table.data td {
|
|
border: 1px solid #ecf0f1;
|
|
}
|
|
.control-table table.data td .content-container {
|
|
position: relative;
|
|
padding: 1px;
|
|
}
|
|
.control-table table.data td.active {
|
|
border-color: #34495e !important;
|
|
}
|
|
.control-table table.data td.active .content-container {
|
|
padding: 0;
|
|
border: 1px solid #34495e;
|
|
}
|
|
.control-table table.data td.active .content-container:before,
|
|
.control-table table.data td.active .content-container:after {
|
|
content: ' ';
|
|
background: #34495e;
|
|
position: absolute;
|
|
left: -2px;
|
|
top: -2px;
|
|
}
|
|
.control-table table.data td.active .content-container:before {
|
|
width: 1px;
|
|
bottom: -2px;
|
|
}
|
|
.control-table table.data td.active .content-container:after {
|
|
right: -2px;
|
|
height: 1px;
|
|
}
|
|
.control-table table.data tr {
|
|
background-color: white;
|
|
}
|
|
.control-table table.data tr.error {
|
|
background-color: #fbecec!important;
|
|
}
|
|
.control-table table.data tr.error td.active.error {
|
|
border-color: #ec0000!important;
|
|
}
|
|
.control-table table.data tr.error td.active.error .content-container {
|
|
border-color: #ec0000!important;
|
|
}
|
|
.control-table table.data tr.error td.active.error .content-container:before,
|
|
.control-table table.data tr.error td.active.error .content-container:after {
|
|
background-color: #ec0000!important;
|
|
}
|
|
.control-table table.data tr:nth-child(2n) {
|
|
background-color: #fbfbfb;
|
|
}
|
|
.control-table table.data tr:first-child td {
|
|
border-top: none;
|
|
}
|
|
.control-table table.data tr:last-child td {
|
|
border-bottom: none;
|
|
}
|
|
.control-table table.data td:first-child {
|
|
border-left: none;
|
|
}
|
|
.control-table table.data td:last-child {
|
|
border-right: none;
|
|
}
|
|
.control-table .control-scrollbar > div {
|
|
border-bottom-right-radius: 4px;
|
|
border-bottom-left-radius: 4px;
|
|
overflow: hidden;
|
|
}
|
|
.control-table .control-scrollbar table.data tr:last-child td {
|
|
border-bottom: 1px solid #ecf0f1;
|
|
}
|
|
.control-table .toolbar {
|
|
background: white;
|
|
border-bottom: 1px solid #e0e0e0;
|
|
}
|
|
.control-table .toolbar a.btn {
|
|
color: #323e50;
|
|
padding: 8px 10px;
|
|
opacity: 0.5;
|
|
filter: alpha(opacity=50);
|
|
-webkit-box-shadow: none !important;
|
|
box-shadow: none !important;
|
|
text-shadow: none;
|
|
}
|
|
.control-table .toolbar a.btn:hover {
|
|
opacity: 1;
|
|
filter: alpha(opacity=100);
|
|
}
|
|
.control-table .toolbar .table-search {
|
|
float: right;
|
|
margin: 3px 3px 0 0;
|
|
}
|
|
.control-table .toolbar .table-search .table-search-input {
|
|
height: auto;
|
|
padding: 5px 13px 5px;
|
|
}
|
|
.control-table .toolbar a.table-icon:before {
|
|
display: inline-block;
|
|
content: ' ';
|
|
width: 16px;
|
|
height: 16px;
|
|
margin-right: 8px;
|
|
position: relative;
|
|
top: 3px;
|
|
background: transparent url(../images/table-icons.gif) no-repeat 0 0;
|
|
background-size: 32px auto;
|
|
}
|
|
.control-table .toolbar a.table-icon.add-table-row-above:before {
|
|
background-position: 0 -56px;
|
|
}
|
|
.control-table .toolbar a.table-icon.delete-table-row:before {
|
|
background-position: 0 -113px;
|
|
}
|
|
.control-table.active .toolbar {
|
|
border-bottom-color: #e0e0e0;
|
|
}
|
|
.control-table .pagination ul {
|
|
padding: 0;
|
|
margin-bottom: 15px;
|
|
}
|
|
.control-table .pagination ul li {
|
|
list-style: none;
|
|
padding: 4px 6px;
|
|
-webkit-border-radius: 2px;
|
|
-moz-border-radius: 2px;
|
|
border-radius: 2px;
|
|
display: inline-block;
|
|
margin-right: 5px;
|
|
font-size: 12px;
|
|
background: #ecf0f1;
|
|
line-height: 100%;
|
|
}
|
|
.control-table .pagination ul li a {
|
|
text-decoration: none;
|
|
color: #95a5a6;
|
|
}
|
|
.control-table .pagination ul li.active {
|
|
background: #3498db;
|
|
}
|
|
.control-table .pagination ul li.active a {
|
|
color: #ffffff;
|
|
}
|
|
@media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-devicepixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) {
|
|
.control-table .toolbar a:before {
|
|
background-position: 0px -9px;
|
|
background-size: 16px auto;
|
|
}
|
|
.control-table .toolbar a.add-table-row-above:before {
|
|
background-position: 0 -39px;
|
|
}
|
|
.control-table .toolbar a.delete-table-row:before {
|
|
background-position: 0 -66px;
|
|
}
|
|
}
|
|
/*
|
|
* String and autocomplete editors
|
|
*/
|
|
.control-table td[data-column-type=string] input[type=text],
|
|
.control-table td[data-column-type=autocomplete] input[type=text] {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
outline: none;
|
|
border: none;
|
|
padding: 6px 10px 7px;
|
|
}
|
|
html.chrome .control-table td[data-column-type=string] input[type=text],
|
|
html.chrome .control-table td[data-column-type=autocomplete] input[type=text] {
|
|
padding: 6px 10px 7px!important;
|
|
}
|
|
html.safari .control-table td[data-column-type=string] input[type=text],
|
|
html.gecko .control-table td[data-column-type=string] input[type=text],
|
|
html.safari .control-table td[data-column-type=autocomplete] input[type=text],
|
|
html.gecko .control-table td[data-column-type=autocomplete] input[type=text] {
|
|
padding: 5px 10px 5px;
|
|
}
|
|
ul.table-widget-autocomplete {
|
|
background: white;
|
|
font-size: 13px;
|
|
margin-top: 0;
|
|
border: 1px solid #808c8d;
|
|
border-top: 1px solid #ecf0f1;
|
|
border-bottom-right-radius: 4px;
|
|
border-bottom-left-radius: 4px;
|
|
}
|
|
ul.table-widget-autocomplete li a {
|
|
padding: 5px 10px;
|
|
}
|
|
/*
|
|
* Checkbox editor
|
|
*/
|
|
.control-table td[data-column-type=checkbox] div[data-checkbox-element] {
|
|
width: 16px;
|
|
height: 16px;
|
|
border-radius: 3px;
|
|
background-color: #FFFFFF;
|
|
border: 1px solid #999999;
|
|
margin: 5px 5px 5px 10px;
|
|
cursor: pointer;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
}
|
|
.control-table td[data-column-type=checkbox] div[data-checkbox-element]:hover {
|
|
border-color: #808080;
|
|
color: #4d4d4d;
|
|
}
|
|
.control-table td[data-column-type=checkbox] div[data-checkbox-element].checked {
|
|
border-width: 2px;
|
|
}
|
|
.control-table td[data-column-type=checkbox] div[data-checkbox-element].checked:before {
|
|
font-family: FontAwesome;
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
text-decoration: inherit;
|
|
-webkit-font-smoothing: antialiased;
|
|
*margin-right: .3em;
|
|
content: "\f00c";
|
|
font-size: 10px;
|
|
position: relative;
|
|
left: 1px;
|
|
top: -4px;
|
|
}
|
|
.control-table td[data-column-type=checkbox] div[data-checkbox-element]:focus {
|
|
border-color: #34495e;
|
|
outline: none;
|
|
}
|
|
/*
|
|
* Dropdown editor
|
|
*/
|
|
.control-table td[data-column-type=dropdown] {
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
}
|
|
.control-table td[data-column-type=dropdown] [data-view-container] {
|
|
padding-right: 20px;
|
|
position: relative;
|
|
cursor: pointer;
|
|
}
|
|
.control-table td[data-column-type=dropdown] [data-view-container]:after {
|
|
font-family: FontAwesome;
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
text-decoration: inherit;
|
|
-webkit-font-smoothing: antialiased;
|
|
*margin-right: .3em;
|
|
content: "\f107";
|
|
font-size: 13px;
|
|
line-height: 100%;
|
|
color: #95a5a6;
|
|
position: absolute;
|
|
top: 8px;
|
|
right: 10px;
|
|
}
|
|
.control-table td[data-column-type=dropdown] [data-view-container]:hover:after {
|
|
color: #0181b9;
|
|
}
|
|
.control-table td[data-column-type=dropdown] [data-dropdown-open=true] {
|
|
background: white;
|
|
}
|
|
.control-table td[data-column-type=dropdown] [data-dropdown-open=true] [data-view-container]:after {
|
|
font-family: FontAwesome;
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
text-decoration: inherit;
|
|
-webkit-font-smoothing: antialiased;
|
|
*margin-right: .3em;
|
|
content: "\f106";
|
|
}
|
|
.control-table td[data-column-type=dropdown] .content-container {
|
|
outline: none;
|
|
}
|
|
/* Frameless control styles start */
|
|
.widget-field.frameless .control-table .table-container {
|
|
border-top: none;
|
|
border-left: none;
|
|
border-right: none;
|
|
-webkit-border-radius: 0;
|
|
-moz-border-radius: 0;
|
|
border-radius: 0;
|
|
}
|
|
.widget-field.frameless .control-table .toolbar {
|
|
background: transparent;
|
|
}
|
|
/* Frameless control styles end */
|
|
html.cssanimations .control-table td[data-column-type=dropdown] [data-view-container].loading:after {
|
|
background: url('../../../../../../modules/system/assets/ui/images/loader-transparent.svg') 50% 50%;
|
|
background-size: 15px 15px;
|
|
position: absolute;
|
|
width: 15px;
|
|
height: 15px;
|
|
top: 6px;
|
|
right: 5px;
|
|
content: ' ';
|
|
-webkit-animation: spin 1s linear infinite;
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
.table-control-dropdown-list {
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
position: absolute;
|
|
background: white;
|
|
border: 1px solid #e0e0e0;
|
|
border-top: none;
|
|
padding-top: 1px;
|
|
overflow: hidden;
|
|
z-index: 1000;
|
|
-webkit-box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
border-bottom-right-radius: 4px;
|
|
border-bottom-left-radius: 4px;
|
|
}
|
|
.table-control-dropdown-list ul {
|
|
border-top: 1px solid #ecf0f1;
|
|
padding: 0;
|
|
margin: 0;
|
|
max-height: 200px;
|
|
overflow: auto;
|
|
}
|
|
.table-control-dropdown-list li {
|
|
list-style: none;
|
|
font-size: 13px;
|
|
color: #555555;
|
|
padding: 5px 10px;
|
|
cursor: pointer;
|
|
outline: none;
|
|
}
|
|
.table-control-dropdown-list li:focus {
|
|
background: #34495e;
|
|
color: white;
|
|
}
|