Skip to content

Instantly share code, notes, and snippets.

@o5
Created Jan 5, 2015
Embed
What would you like to do?
Grido LESS
.grido table, .grido .filter {
background: #fff;
border-radius: 4px;
border-spacing: 0;
border: 1px solid #CACACA;
text-align: left;
width: 100%;
}
.grido table, .grido .filter.outer {
box-shadow: 1px 1px 12px -1px rgba(0,0,0,.2);
}
.grido thead th,.grido tfoot td,.grido .filter.outer {
background: #E9E9E9;
background:-moz-linear-gradient(top, #FAFAFA 0%, #E9E9E9 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#FAFAFA), color-stop(100%,#E9E9E9));
background:-webkit-linear-gradient(top, #FAFAFA 0%,#E9E9E9 100%);
background:-o-linear-gradient(top, #FAFAFA 0%,#E9E9E9 100%);
background:-ms-linear-gradient(top, #FAFAFA 0%,#E9E9E9 100%);
background:linear-gradient(top, #FAFAFA 0%,#E9E9E9 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FAFAFA', endColorstr='#E9E9E9');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#FAFAFA', endColorstr='#E9E9E9')";
}
.grido {
thead {
font-size: 1.15em;
.filter {
th {
background: #f2f2f2;
background: -moz-linear-gradient(top, #f2f2f2 0%, #e9e9e9 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f2f2), color-stop(100%,#e9e9e9));
background: -webkit-linear-gradient(top, #f2f2f2 0%,#e9e9e9 100%);
background: -o-linear-gradient(top, #f2f2f2 0%,#e9e9e9 100%);
background: -ms-linear-gradient(top, #f2f2f2 0%,#e9e9e9 100%);
background: linear-gradient(to bottom, #f2f2f2 0%,#e9e9e9 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f2f2', endColorstr='#e9e9e9',GradientType=0 );
}
}
th {
border-bottom: 1px solid #CACACA!important;
padding: 3px 6px!important;
}
}
tr.head {
th:first-child {
border-radius: 4px 0 0 0;
}
th:last-child {
border-radius: 4px 4px 0 0;
}
}
th.column {
width: 7%;
span {
width: 0;
height: 0;
vertical-align: top;
content: "";
float: right;
margin-top: 8px;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
}
}
tfoot {
font-size: 1.1emtext-align: center;
line-height: 23px!important;
tr {
height: 35px;
td {
line-height: 22px;
}
}
td {
border-bottom:0;
}
td:first-child {
border-radius: 0 0 0 4px;
}
td:last-child {
border-radius: 0 0 4px 4px;
}
.operations {
float: left;
text-align: left;
}
.count {
float:right;
text-align: left;
}
.form-control {
display: inline;
}
}
.no-results {
text-align: center;
}
tr.filter {
height: 20px;
th {
padding: 2px 6px 2px 6px;
border-radius: 0;
height: 35px;
}
}
.filter.outer {
display: inline-block;
width: 100%;
margin-bottom: 20px;
min-height: 5em;
.items {
width: 85%;
float: left;
& > span {
float: left;
display: block;
width: 12em;
height: 5em;
padding: 7px;
}
}
label {
margin-bottom: 2px;
font-size: 12px;
}
.buttons {
float: right;
margin: 1.4em 1em 0;
}
}
th.column.asc {
span {
border-bottom: 4px solid #555;
}
}
th.column.desc {
span {
border-top: 4px solid #555;
}
}
th.actions {
width: 15%;
text-align: center;
}
td.actions {
a {
margin-right: 3px;
}
}
th.checker {
width: 1%;
text-align: center;
}
td.checker {
text-align: center;
}
.center {
text-align: center;
}
.left {
text-align: left;
}
.right {
text-align: right;
}
table {
border-collapse: inherit;
thead {
th {
vertical-align: middle;
}
}
tfoot {
td {
text-align: inherit;
}
}
}
input.text {
text-indent: 3px;
}
.buttons {
input {
width: auto;
height: auto;
margin-right: 4px;
}
}
.form-control {
height: auto;
width: auto;
}
tbody {
.form-control {
width: 100%;
height: 23px;
padding: 0 0 0 3px;
}
}
tr.active {
td {
background-color: #d9edf7!important;
}
}
}
.grido th,.grido td {
border:1px solid #CACACA;
border-width: 0 1px 1px 0;
height: 30px;
}
.grido .filter.outer select,.grido .filter.outer input.text,.grido .filter.inner select,.grido .filter.inner input.text {
width: 100%;
}
.grido th.buttons,.grido td.actions {
text-align: center;
}
.grido th:last-child,.grido td:last-child {
border-right: 0;
}
.grido table th, .table td {
vertical-align: middle;
}
.grido table td, .grido table th {
border-top: 0!important;
}
.grido tbody tr td, .grido tfoot tr td {
vertical-align: middle;
height: 20px;
padding: 5px;
}
.grido input.text, .grido select {
margin-bottom: 0;
padding: 0;
height: 23px;
width: auto;
}
.btn-mini {
[class*=" {
icon-"] {
margin-top: 1px;
}
}
}
.btn-sm .fa,.btn-xs .fa,small .fa,.btn-group-sm .fa,.btn-group-xs .fa,.input-group-sm .fa,.input-group-xs .fa {
font-size: 14px;
top: 1px;
position: relative;
/**;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment