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
/* .clearfix { *zoom:1; }
Forms .clearfix:before, .clearfix:after {
*/ display:table;
content:"";
span.required { }
color: #F00; .clearfix:after { clear:both; }
} .hide-text {
font:0 / 0 a;
/* color:transparent;
Grid view text-shadow:none;
*/ background-color:transparent;
border:0;
.grid-view { }
padding-top: 20px; .input-block-level {
} display:block;
width:100%;
.grid-view-loading { min-height:28px;
background: url(../img/loading.gif) no-repeat; -webkit-box-sizing:border-box;
} -moz-box-sizing:border-box;
-ms-box-sizing:border-box;
.grid-view table.items th a { box-sizing:border-box;
display: block; }
position: relative; .grid-view { padding-top:20px; }
} .grid-view table.items th a {
display:block;
.grid-view table.items th a .caret { position:relative;
display: none; }
position: absolute; .grid-view table.items th a .caret {
right: 5px; display:none;
top: 7px; position:absolute;
} right:5px;
top:7px;
.grid-view table.items th a.asc .caret { }
display: block; .grid-view table.items th a.asc .caret { display:block; }
} .grid-view table.items th a.desc .caret {
border-bottom:4px solid #000000;
.grid-view table.items th a.desc .caret { border-top:none;
border-bottom: 4px solid #000; display:block;
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 {
.grid-view table.items tr.selected td { margin-bottom:0;
background: #EEE; width:100%;
} }
.grid-view .button-column {
.grid-view .button-column { text-align:center;
text-align: center; width:50px;
width: 50px; }
} .grid-view .checkbox-column { width:15px; }
.grid-view .summary {
.grid-view .checkbox-column { margin-bottom:5px;
width: 15px; text-align:right;
} }
.grid-view .pager { margin-top:5px; }
.grid-view .summary { .grid-view .empty { font-style:italic; }
margin-bottom: 5px; .grid-view-loading { background:url(../img/loading.gif) no-repeat; }
text-align: right; .list-view .summary {
} margin-bottom:5px;
text-align:right;
.grid-view .pager { }
margin-top: 5px; .list-view .pager { margin-top:5px; }
} .list-view .sorter {
margin:0 0 5px 0;
.grid-view .empty { text-align:right;
font-style: italic; }
} .list-view .sorter ul {
display:inline;
.grid-view .filters .filter-container { list-style:none outside none;
padding: 0 10px 0 0; margin:0;
} padding:0;
}
.grid-view .filters input, .list-view .sorter li {
.grid-view .filters select { display:inline;
margin-bottom: 0; margin:0 0 0 5px;
width: 100%; padding:0;
} }
.list-view .sorter a .caret {
/* position:absolute;
List view right:5px;
*/ top:7px;
}
.list-view-loading { .list-view .sorter a .caret.desc .caret {
background: url(../img/loading.gif) no-repeat; border-bottom:4px solid #000000;
} border-top:none;
}
.list-view .summary { .list-view-loading { background:url(../img/loading.gif) no-repeat; }
margin-bottom: 5px; .detail-view .null { color:#ffc0cb; }
text-align: right; .detail-view th {
} text-align:right;
width:160px;
.list-view .pager { }
margin-top: 5px; 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 {
.list-view .sorter { border-color:#b94a48;
margin: 0 0 5px 0; color:#b94a48;
text-align: right; }
} .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;
.list-view .sorter ul { -webkit-box-shadow:0 0 6px #d59392;
display: inline; -moz-box-shadow:0 0 6px #d59392;
list-style: none outside none; box-shadow:0 0 6px #d59392;
margin: 0; }
padding: 0; .form-inline .help-block.error, .form-inline .help-inline.error, .form-vertical .help-block.error, .form-vertical .help-inline.error { color:#b94a48; }
}
.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
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 ...@@ -54,6 +54,14 @@ Yii::app()->user->setFlash('error', '<strong>Oh snap!</strong> Change a few thin
<h2>Breadcrumbs</h2> <h2>Breadcrumbs</h2>
<?php $this->widget('bootstrap.widgets.BootBreadcrumbs', array( <?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'), 'links'=>array('Library'=>'#', 'Data'),
)); ?> )); ?>
...@@ -466,11 +474,6 @@ Yii::app()->user->setFlash('error', '<strong>Oh snap!</strong> Change a few thin ...@@ -466,11 +474,6 @@ Yii::app()->user->setFlash('error', '<strong>Oh snap!</strong> Change a few thin
'dataProvider'=>$listDataProvider, 'dataProvider'=>$listDataProvider,
'template'=>"{items}\n{pager}", 'template'=>"{items}\n{pager}",
'itemView'=>'_thumb', '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> <h4>Source code</h4>
...@@ -598,7 +601,7 @@ Yii::app()->user->setFlash('error', '<strong>Oh snap!</strong> Change a few thin ...@@ -598,7 +601,7 @@ Yii::app()->user->setFlash('error', '<strong>Oh snap!</strong> Change a few thin
</div> </div>
<div class=\"modal-body\"> <div class=\"modal-body\">
<p>One fine body…</p> <p>One fine body...</p>
</div> </div>
<div class=\"modal-footer\"> <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