Skip to content

Y
Yii Bootstrap 3
Commit d912b1e8 by Crisu83
Options

changed to use LESS for Yii related styles and updated the demo

parent 763f828c
Showing with 288 additions and 143 deletions
assets/css/bootstrap-yii.css
/*
Forms
*/
span.required {
color: #F00;
}
/*
Grid view
*/
.grid-view {
padding-top: 20px;
}
.grid-view-loading {
background: url(../img/loading.gif) no-repeat;
}
.grid-view table.items th a {
display: block;
position: relative;
}
.grid-view table.items th a .caret {
display: none;
position: absolute;
right: 5px;
top: 7px;
}
.grid-view table.items th a.asc .caret {
display: block;
}
.grid-view table.items th a.desc .caret {
border-bottom: 4px solid #000;
border-top: none;
display: block;
}
.grid-view table.items tr.selected td {
background: #EEE;
}
.grid-view .button-column {
text-align: center;
width: 50px;
}
.grid-view .checkbox-column {
width: 15px;
}
.grid-view .summary {
margin-bottom: 5px;
text-align: right;
}
.grid-view .pager {
margin-top: 5px;
}
.grid-view .empty {
font-style: italic;
}
.grid-view .filters .filter-container {
padding: 0 10px 0 0;
}
.grid-view .filters input,
.grid-view .filters select {
margin-bottom: 0;
width: 100%;
}
/*
List view
*/
.list-view-loading {
background: url(../img/loading.gif) no-repeat;
}
.list-view .summary {
margin-bottom: 5px;
text-align: right;
}
.list-view .pager {
margin-top: 5px;
}
.list-view .sorter {
margin: 0 0 5px 0;
text-align: right;
}
.list-view .sorter ul {
display: inline;
list-style: none outside none;
margin: 0;
padding: 0;
}
.list-view .sorter li {
display: inline;
margin: 0 0 0 5px;
padding: 0;
}
.list-view .sorter a .caret {
position: absolute;
right: 5px;
top: 7px;
}
.list-view .sorter a.desc .caret {
border-bottom: 4px solid #000;
border-top: none;
}
/*
Detail view
*/
table.detail-view .null {
color: #FFC0CB;
}
table.detail-view th {
text-align: right;
width: 160px;
}
\ No newline at end of file
.clearfix { *zoom:1; }
.clearfix:before, .clearfix:after {
display:table;
content:"";
}
.clearfix:after { clear:both; }
.hide-text {
font:0 / 0 a;
color:transparent;
text-shadow:none;
background-color:transparent;
border:0;
}
.input-block-level {
display:block;
width:100%;
min-height:28px;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
}
.grid-view { padding-top:20px; }
.grid-view table.items th a {
display:block;
position:relative;
}
.grid-view table.items th a .caret {
display:none;
position:absolute;
right:5px;
top:7px;
}
.grid-view table.items th a.asc .caret { display:block; }
.grid-view table.items th a.desc .caret {
border-bottom:4px solid #000000;
border-top:none;
display:block;
}
.grid-view table.items tr.selected td { background:#eeeeee; }
.grid-view .filters .filter-container { padding:0 10px 0 0; }
.grid-view .filters input, .grid-view .filters select {
margin-bottom:0;
width:100%;
}
.grid-view .button-column {
text-align:center;
width:50px;
}
.grid-view .checkbox-column { width:15px; }
.grid-view .summary {
margin-bottom:5px;
text-align:right;
}
.grid-view .pager { margin-top:5px; }
.grid-view .empty { font-style:italic; }
.grid-view-loading { background:url(../img/loading.gif) no-repeat; }
.list-view .summary {
margin-bottom:5px;
text-align:right;
}
.list-view .pager { margin-top:5px; }
.list-view .sorter {
margin:0 0 5px 0;
text-align:right;
}
.list-view .sorter ul {
display:inline;
list-style:none outside none;
margin:0;
padding:0;
}
.list-view .sorter li {
display:inline;
margin:0 0 0 5px;
padding:0;
}
.list-view .sorter a .caret {
position:absolute;
right:5px;
top:7px;
}
.list-view .sorter a .caret.desc .caret {
border-bottom:4px solid #000000;
border-top:none;
}
.list-view-loading { background:url(../img/loading.gif) no-repeat; }
.detail-view .null { color:#ffc0cb; }
.detail-view th {
text-align:right;
width:160px;
}
span.required { color:#ff0000; }
.form-inline label.error, .form-vertical label.error { color:#b94a48; }
.form-inline select.error, .form-inline input.error, .form-inline textarea.error, .form-vertical select.error, .form-vertical input.error, .form-vertical textarea.error {
border-color:#b94a48;
color:#b94a48;
}
.form-inline select.error:focus, .form-inline input.error:focus, .form-inline textarea.error:focus, .form-vertical select.error:focus, .form-vertical input.error:focus, .form-vertical textarea.error:focus {
border-color:#953b39;
-webkit-box-shadow:0 0 6px #d59392;
-moz-box-shadow:0 0 6px #d59392;
box-shadow:0 0 6px #d59392;
}
.form-inline .help-block.error, .form-inline .help-inline.error, .form-vertical .help-block.error, .form-vertical .help-inline.error { color:#b94a48; }
assets/less/bootstrap-yii.less 0 → 100644
/*
Imports
*/
@import "../../lib/bootstrap/less/mixins.less";
/*
Grid view
*/
.grid-view {
padding-top: 20px;
table.items {
th a {
display: block;
position: relative;
.caret {
display: none;
position: absolute;
right: 5px;
top: 7px;
}
&.asc .caret {
display: block;
}
&.desc .caret {
border-bottom: 4px solid #000;
border-top: none;
display: block;
}
}
tr.selected td {
background: #EEE;
}
}
.filters {
.filter-container {
padding: 0 10px 0 0;
}
input,
select {
margin-bottom: 0;
width: 100%;
}
}
.button-column {
text-align: center;
width: 50px;
}
.checkbox-column {
width: 15px;
}
.summary {
margin-bottom: 5px;
text-align: right;
}
.pager {
margin-top: 5px;
}
.empty {
font-style: italic;
}
}
.grid-view-loading {
background: url(../img/loading.gif) no-repeat;
}
/*
List view
*/
.list-view {
.summary {
margin-bottom: 5px;
text-align: right;
}
.pager {
margin-top: 5px;
}
.sorter {
margin: 0 0 5px 0;
text-align: right;
ul {
display: inline;
list-style: none outside none;
margin: 0;
padding: 0;
}
li {
display: inline;
margin: 0 0 0 5px;
padding: 0;
}
a .caret {
position: absolute;
right: 5px;
top: 7px;
&.desc .caret {
border-bottom: 4px solid #000;
border-top: none;
}
}
}
}
.list-view-loading {
background: url(../img/loading.gif) no-repeat;
}
/*
Detail view
*/
.detail-view {
.null {
color: #FFC0CB;
}
th {
text-align: right;
width: 160px;
}
}
/*
Form
*/
span.required {
color: #F00;
}
.form-inline,
.form-vertical {
label.error {
color: #B94A48;
}
select.error,
input.error,
textarea.error {
border-color: #B94A48;
color: #B94A48;
&:focus {
border-color: #953B39;
.box-shadow(0 0 6px #D59392);
}
}
.help-block.error,
.help-inline.error {
color: #B94A48;
}
}
demo/protected/views/site/index.php
......@@ -54,6 +54,14 @@ Yii::app()->user->setFlash('error', '<strong>Oh snap!</strong> Change a few thin
<h2>Breadcrumbs</h2>
<?php $this->widget('bootstrap.widgets.BootBreadcrumbs', array(
'links'=>array(),
)); ?>
<?php $this->widget('bootstrap.widgets.BootBreadcrumbs', array(
'links'=>array('Library'),
)); ?>
<?php $this->widget('bootstrap.widgets.BootBreadcrumbs', array(
'links'=>array('Library'=>'#', 'Data'),
)); ?>
......@@ -466,11 +474,6 @@ Yii::app()->user->setFlash('error', '<strong>Oh snap!</strong> Change a few thin
'dataProvider'=>$listDataProvider,
'template'=>"{items}\n{pager}",
'itemView'=>'_thumb',
// Remove the existing tooltips and rebind the plugin after each ajax-call.
'afterAjaxUpdate'=>"js:function() {
jQuery('.tooltip').remove();
jQuery('a[rel=tooltip]').tooltip();
}",
)); ?>
<h4>Source code</h4>
......@@ -598,7 +601,7 @@ Yii::app()->user->setFlash('error', '<strong>Oh snap!</strong> Change a few thin
</div>
<div class=\"modal-body\">
<p>One fine body…</p>
<p>One fine body...</p>
</div>
<div class=\"modal-footer\">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment