Skip to content

Instantly share code, notes, and snippets.

@samuelsimoes
Created October 19, 2012 00:15
Show Gist options
  • Save samuelsimoes/3915540 to your computer and use it in GitHub Desktop.
Save samuelsimoes/3915540 to your computer and use it in GitHub Desktop.
Adaptando o CSS da paginação do Twitter Bootstrap para o CakePHP

###Adaptando o CSS da paginação do Twitter Bootstrap para o CakePHP Marcação necessária:

<div class="pagination">
  <div class="list">
    <?php
      echo $this->Paginator->prev('« Anterior', null, null, array('class' => 'prev disabled'));
      echo $this->Paginator->numbers(array('separator' => false));
      echo $this->Paginator->next('Próximo »', null, null, array('class' => 'prev disabled'));
    ?>
  </div>
</div>

E o CSS:

.pagination .list {
  display: inline-block;
  *display: inline;
  margin-bottom: 0;
  margin-left: 0;
  -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
          border-radius: 3px;
  *zoom: 1;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
     -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.pagination .list > span {
  display: inline;
}

.pagination .list > span > a,
.pagination .list > .current,
.pagination .list > .disabled {
  float: left;
  padding: 0 14px;
  line-height: 38px;
  text-decoration: none;
  background-color: #ffffff;
  border: 1px solid #dddddd;
  border-left-width: 0;
}

.pagination .list > span > a:hover,
.pagination .list > .current {
  background-color: #f5f5f5;
}

.pagination .list > span.current {
  color: #999999;
  cursor: default;
}

.pagination .list > .disabled > span,
.pagination .list > .disabled,
.pagination ul > .disabled > a,
.pagination ul > .disabled > a:hover {
  color: #999999;
  cursor: default;
  background-color: transparent;
}

.pagination .list > span:first-child,
.pagination .list > span:first-child > a {
  border-left-width: 1px;
  -webkit-border-radius: 3px 0 0 3px;
     -moz-border-radius: 3px 0 0 3px;
          border-radius: 3px 0 0 3px;
}

.pagination .list > span:last-child,
.pagination .list > span:last-child > a {
  -webkit-border-radius: 0 3px 3px 0;
     -moz-border-radius: 0 3px 3px 0;
          border-radius: 0 3px 3px 0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment