libs/bootstrap/less/pagination.less

   1 //
   2 // Pagination (multiple pages)
   3 // --------------------------------------------------
   4
   5 // Space out pagination from surrounding content
   6 .pagination {
   7   margin: @baseLineHeight 0;
   8 }
   9
  10 .pagination ul {
  11   // Allow for text-based alignment
  12   display: inline-block;
  13   .ie7-inline-block();
  14   // Reset default ul styles
  15   margin-left: 0;
  16   margin-bottom: 0;
  17   // Visuals
  18   .border-radius(@baseBorderRadius);
  19   .box-shadow(0 1px 2px rgba(0,0,0,.05));
  20 }
  21 .pagination ul > li {
  22   display: inline; // Remove list-style and block-level defaults
  23 }
  24 .pagination ul > li > a,
  25 .pagination ul > li > span {
  26   float: left; // Collapse white-space
  27   padding: 4px 12px;
  28   line-height: @baseLineHeight;
  29   text-decoration: none;
  30   background-color: @paginationBackground;
  31   border: 1px solid @paginationBorder;
  32   border-left-width: 0;
  33 }
  34 .pagination ul > li > a:hover,
  35 .pagination ul > li > a:focus,
  36 .pagination ul > .active > a,
  37 .pagination ul > .active > span {
  38   background-color: @paginationActiveBackground;
  39 }
  40 .pagination ul > .active > a,
  41 .pagination ul > .active > span {
  42   color: @grayLight;
  43   cursor: default;
  44 }
  45 .pagination ul > .disabled > span,
  46 .pagination ul > .disabled > a,
  47 .pagination ul > .disabled > a:hover,
  48 .pagination ul > .disabled > a:focus {
  49   color: @grayLight;
  50   background-color: transparent;
  51   cursor: default;
  52 }
  53 .pagination ul > li:first-child > a,
  54 .pagination ul > li:first-child > span {
  55   border-left-width: 1px;
  56   .border-left-radius(@baseBorderRadius);
  57 }
  58 .pagination ul > li:last-child > a,
  59 .pagination ul > li:last-child > span {
  60   .border-right-radius(@baseBorderRadius);
  61 }
  62
  63
  64 // Alignment
  65 // --------------------------------------------------
  66
  67 .pagination-centered {
  68   text-align: center;
  69 }
  70 .pagination-right {
  71   text-align: right;
  72 }
  73
  74
  75 // Sizing
  76 // --------------------------------------------------
  77
  78 // Large
  79 .pagination-large {
  80   ul > li > a,
  81   ul > li > span {
  82     padding: @paddingLarge;
  83     font-size: @fontSizeLarge;
  84   }
  85   ul > li:first-child > a,
  86   ul > li:first-child > span {
  87     .border-left-radius(@borderRadiusLarge);
  88   }
  89   ul > li:last-child > a,
  90   ul > li:last-child > span {
  91     .border-right-radius(@borderRadiusLarge);
  92   }
  93 }
  94
  95 // Small and mini
  96 .pagination-mini,
  97 .pagination-small {
  98   ul > li:first-child > a,
  99   ul > li:first-child > span {
 100     .border-left-radius(@borderRadiusSmall);
 101   }
 102   ul > li:last-child > a,
 103   ul > li:last-child > span {
 104     .border-right-radius(@borderRadiusSmall);
 105   }
 106 }
 107
 108 // Small
 109 .pagination-small {
 110   ul > li > a,
 111   ul > li > span {
 112     padding: @paddingSmall;
 113     font-size: @fontSizeSmall;
 114   }
 115 }
 116 // Mini
 117 .pagination-mini {
 118   ul > li > a,
 119   ul > li > span {
 120     padding: @paddingMini;
 121     font-size: @fontSizeMini;
 122   }
 123 }