From 0912bd44e2c2d2d9de689b57ee8fe5a7a477ec51 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Petr=20Bugy=C3=ADk?= Date: Fri, 26 Jul 2013 15:54:06 +0200 Subject: [PATCH] Moved style sheet from grido-sandbox [Closed #50] --- client-side/grido.css | 201 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 201 insertions(+) create mode 100644 client-side/grido.css diff --git a/client-side/grido.css b/client-side/grido.css new file mode 100644 index 00000000..486e1fd8 --- /dev/null +++ b/client-side/grido.css @@ -0,0 +1,201 @@ +/** + * This file is part of the Grido (http://grido.bugyik.cz) + * + * Copyright (c) 2011 Petr Bugyík (http://petr.bugyik.cz) + * + * For the full copyright and license information, please view + * the file license.md that was distributed with this source code. + */ + +/******************** GRID ********************/ + +.grido { + background: #fff; + border-radius: 4px; + border-spacing: 0; + border: 1px solid #CACACA; + text-align: left; + border-collapse: inherit; + width: 100%; + box-shadow: 1px 1px 12px -1px rgba(0,0,0,.2); +} + +.grido thead th, +.grido tfoot td, +.grido.filter.outer, +.navbar-inner { + 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 .column, +.grido thead .actions { + background: #fafafa; + background: -moz-linear-gradient(top, #fafafa 0%, #f3f3f3 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fafafa), color-stop(100%,#f3f3f3)); + background: -webkit-linear-gradient(top, #fafafa 0%,#f3f3f3 100%); + background: -o-linear-gradient(top, #fafafa 0%,#f3f3f3 100%); + background: -ms-linear-gradient(top, #fafafa 0%,#f3f3f3 100%); + background: linear-gradient(to bottom, #fafafa 0%,#f3f3f3 100%); + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fafafa', endColorstr='#f3f3f3',GradientType=0 ); +} + +.grido thead .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 ); +} + +.grido tr.head th:first-child {border-radius: 4px 0 0 0} +.grido tr.head th:last-child {border-radius: 4px 4px 0 0} + +.grido th, +.grido td + { + padding:0 6px ; + border:solid #CACACA; + border-width: 0 1px 1px 0; + height: 30px; +} +/* +.grido td, +.grido th.checker{border-width: 0 0 1px 0;} +.grido .head th {border-width: 0} +*/ +.grido th.column {width: 8%} + +.grido thead {font-size: 1.15em} +.grido tfoot {font-size: 1.1em} + +.grido .no-results {text-align: center} + +/******************** FILTER ********************/ + +.grido tr.filter {height: 20px} + +.grido tr.filter th { + padding: 2px 6px 0 5px; + border-radius: 0; + height: 35px; +} + +.grido.filter.outer { + display: inline-block; + width: 100%; + margin-bottom: 20px; +} + +.grido.filter.outer .items { + width: 90%; + float: left; + min-height: 60px; +} + +.grido.filter.outer .items span { + float: left; + display: block; + width: 133px; + padding: 7px; +} + +.filter.outer select, +.filter.outer input.text, +.filter.inner select, +.filter.inner input.text {width: 100%} + +.grido.filter.outer .buttons { + float: right; + margin: .9% .5% 0 0; +} + +.grido input.date {background: url('../img/cal.jpg') #fff no-repeat right center} + +/*.grido .btn-group {vertical-align: baseline}*/ + +/******************** OTHERS ********************/ + +.grido th.actions { + width: 15%; + text-align: center; +} + +.grido th.buttons, +.grido td.actions {text-align: center} + +.grido td.actions a {margin-right: 3px} +.grido th.checker {width: 0.1%;text-align: center} +.grido td.checker {text-align: center} + +.grido th:last-child, +.grido td:last-child { border-right: 0;} + +.grido tbody tr.even {background: #f9f9f9} + +.grido tbody tr:hover, +.grido tbody tr.selected {background: #DEEEFA} + +.grido tfoot tr {height: 35px} +.grido tfoot td {border-bottom:0} +.grido tfoot td:first-child {border-radius: 0 0 0 4px} +.grido tfoot td:last-child {border-radius: 0 0 4px 4px} + +.grido tfoot {text-align: center; line-height: 23px} +.grido tfoot .operations {float: left;text-align: left} +.grido tfoot .count {float:right; text-align: left} +.grido .grido .dropdown-menu {min-width: 50px} + +.grido .center {text-align: center} +.grido .empty {background: #FBFBFB url(../img/bg.jpg) 0 0 repeat} + +/******************** TWITTER BOOTSTRAP RESET ********************/ + +.grido input.text, .grido select { + margin-bottom: 0; + padding: 0; + height: 23px; + width: auto; +} +.grido input.text {text-indent: 3px} + +.grido .buttons input { + width: auto; + padding: 4px 10px 4px; + height: auto; + margin-right: 4px; +} +.grido label {display: inline} + +.grido th.column span { + display: inline-block; + width: 0; + height: 0; + vertical-align: top; + content: ""; + float: right; + margin-top: 8px; + border-right: 4px solid transparent; + border-left: 4px solid transparent; +} + +.grido th.column div {width: auto} + +.grido th.column.asc span {border-bottom: 4px solid #555} +.grido th.column.desc span {border-top: 4px solid #555} + +.grido input[type="radio"], +.grido input[type="checkbox"] {margin: 3px 0} + +.grido.filter.outer label {font-size: 12px} + +.grido .dropdown-menu {min-width: auto;}