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} 124